iOS HTML5 tarih seçici, genişlik kabul etmez:% 100;

Sitemin mobil sürümü için formumda bir html5 tarih seçicisi var. Tüm metin girişlerim genişlik olarak ayarlandı:% 100 ve ana td'si sağa sola: 15px'e sığdırmak için ayarlandı. Bu, alanların güzel bir şekilde biçimlendirildiğini ve cihazın yönünün değişmesi durumunda her zaman kabın yarısını dolduracak şekilde ayarlandığını gösterir. Ancak tarih seçici aynı şekilde davranmaz, herkes yardımcı olabilir mi?iOS HTML5 tarih seçici, genişlik kabul etmez:% 100;

Form:

<form method="get" action="home"> 
<table id="form"> 
<tr><td> 
<input type="text" name="Title" class="tbox" placeholder="Title" /> 
</td><td> 
<input type="text" name="Genre" class="tbox" placeholder="Genre" /> 
</td></tr> 
<tr><td> 
<input type="text" name="Location" class="tbox" placeholder="Location" /> 
</td><td> 
<input type="date" name="Date" class="tbox" placeholder="DD/MM/YY" /> 
</td></tr> 
<tr><td> 
<input type="text" name="postcode" class="tbox" id="postcode" placeholder="Postcode" /> 
</td><td> 
<input type="number" name="radius" class="tbox" placeholder="Mile Radius" /><br /> 
</td></tr> 
</table> 
<input type="submit" value="Search" /> 
</form>

İlgili CSS: .tbox% 100'lük bir genişlik ve bir dolgu hem varmış gibi

.tbox { 
background-color: #a1c9ff; 
border: 1px solid #003f94; 
width: 100%; 
height: 30px; 
margin: 3px 2px; 
padding: 0 5px; 
border-radius: 15px; 
font-size: 18px; 
float: left; 
} 

table#form tr td { 
overflow: hidden; 
padding-right: 15px; 
}

kaynak

2013-05-02 cainy393

.tbox { 
    min-width:100%; 
} 
table#form {  
    width:100%; 
}

kullanım genişliğe% 100 eklemeyi deneyebilirsiniz: .tbox için% 100, ben bu sorunu çözebilir umuyoruz. jsfiddle http://jsfiddle.net/brfQf/1/

kaynak

2013-05-02 18:42:50

Bu güzel çalışır ve doğru kabul edilen cevap olmalıdır. – jmknoll

görünüyor. Bu, kutunun istenen alanın dışına çıkmasına neden olur. Bu sorunu çözmek için masa # formu ve min-genişliği için box-sizing: border-box;

.tbox { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

kaynak

2013-05-02 18:05:43 Hughes

, bu tarih seçici olduğunu istenen etki değil tam yapıyor ne tarih seçici – cainy393

ile benim sorunu çözmezse metin kutuları ile daha kolay hayatımı yaptınız mı? Bu bir JSFiddle'ı bir araya getirdiğimde göründüğü gibi. http://jsfiddle.net/brfQf/ – Hughes

Bu pencerede, daha ince olması için çıkış penceresini yeniden boyutlandırırsanız, sol yarının daha ince olduğunu görürsünüz, sağ yarı aynı boyutta kalır. Tarih seçicisi orada olduğunda bu gerçekleşmez. Ayrıca, telefonumda, manzaraya gittiğimde tam boyu doldurmuyor. Başka bir deyişle, genişliği görmezden geliyor:% 100 ve sadece 100px civarında sabitleniyor. – cainy393

Bu css stil güncelledik mobil Safari'de sorun giderir:

-webkit-appearance: none;

Ancak, giriş görünümünü değiştirir.

kaynak

2013-12-12 12:32:35

Doğru cevap bu, спасибо, мужик :) –

bir sabit değer kullanmak mümkün, Yani, tam ekran yapmak için bu üniteyi kullanabilirsiniz:

width: 100vw

Ama uyumluluğunu dikkate almak gerekir, İşte uyumluluğu hakkında bir link:

Bu iken

http://caniuse.com/#search=vw

kaynak

2016-01-22 09:33:50 Dudy

iOS HTML5 tarih seçici, genişlik kabul etmez:% 100;

cevap

İlgili konular