Selektor daty w systemie iOS HTML5 nie akceptuje szerokości: 100%;

Mam selektor dat w formacie HTML5 w moim formularzu dla wersji mobilnej mojej witryny. Wszystkie moje dane wejściowe są ustawione na szerokość: 100% i jego macierzysty td jest ustawiony na prawe dopełnienie: 15 pikseli, aby pasował. Oznacza to, że moje pola są ładnie sformatowane i dostosowują się, aby zawsze wypełniać połowę kontenera, gdy zmieni się orientacja urządzenia. Jednak selektor daty nie zachowuje się w taki sam sposób, czy ktoś może pomóc?Selektor daty w systemie iOS HTML5 nie akceptuje szerokości: 100%;

Postać:

<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>

Stosowna CSS:

.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; 
}

Źródło

2013-05-02 cainy393

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

używać szerokość 100% dla formy i min-width stół #: 100% dla .tbox, mam nadzieję, że to może rozwiązać problem. zaktualizowaniu jsfiddle http://jsfiddle.net/brfQf/1/

Źródło

2013-05-02 18:42:50

To działa pięknie i powinno być poprawną, zaakceptowaną odpowiedzią. – jmknoll

Wygląda .tbox ma zarówno szerokość 100% i wyściółkę. To spowodowałoby, że pudełko wychodzi poza pożądany obszar. Aby rozwiązać ten problem można spróbować dodać box-sizing: border-box;

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

Źródło

2013-05-02 18:05:43 Hughes

Mimo to nie uczynić moje życie łatwiejsze przy polach tekstowych, to nie rozwiązuje mojego problemu z wyboru daty – cainy393

Jaka jest data kompletacji robi dokładnie to, że nie jest to pożądany efekt? Tak to wygląda, kiedy skomponowałem JSFiddle tego. http://jsfiddle.net/brfQf/ – Hughes

W tym skrzydle, jeśli zmienisz rozmiar okna wyjściowego na cieńsze, zobaczysz, że lewa połowa staje się cieńsza, podczas gdy prawa połowa pozostaje tej samej wielkości. Nie występuje to, gdy istnieje selektor dat. Również w moim telefonie, kiedy wchodzę w krajobraz, nie wypełnia on pełnego rozmiaru. Innymi słowy, wydaje się ignorować szerokość: 100% i po prostu naprawione około 100 pikseli. – cainy393

Ten styl css rozwiązuje problem w mobilnym Safari:

-webkit-appearance: none;

jednak zmienia wejściowego wygląd.

Źródło

2013-12-12 12:32:35

To odpowiednia odpowiedź, спасибо, мужик :) –

Jest w stanie wykorzystać stałą wartość, więc możesz używać tego urządzenia, aby to pełny ekran:

width: 100vw

Ale trzeba wziąć pod uwagę jego zgodność, tu jest link o jej zgodności:

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

Źródło

2016-01-22 09:33:50 Dudy

Selektor daty w systemie iOS HTML5 nie akceptuje szerokości: 100%;

Odpowiedz

Powiązane problemy