iOS HTML5-date-picker wird nicht akzeptieren, width: 100%;
Habe ich ein html5-date-picker in meinem Formular für eine mobile version meiner Website. Alle meine Texteingaben sind festgelegt width:100% und die übergeordnete td ist festgelegt padding-right:15px zu machen, passen. Dies bedeutet, meine Felder sind ordentlich formatiert und anpassen, um immer füllen bis die Hälfte der container, wenn die Ausrichtung des Geräts ändert. Jedoch ist der Datum-picker nicht in der gleichen Weise Verhalten, kann jemand helfen?
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>
Relevante 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;
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
verwenden Sie width 100% für Tabelle#form-und min-width:100% für .die T-Box, ich hoffe das konnte dein problem lösen. aktualisiert haben die jsfiddle http://jsfiddle.net/brfQf/1/
Dieser css-Stil behebt das problem in der mobilen Safari:
Aber es ändert Eingang Aussehen.
Wie es aussieht .T-Box hat eine Breite von 100% und ein padding. Dies würde das Ergebnis in das Feld Erweiterung außerhalb des gewünschten Bereichs. Diese zu lösen, könnten Sie versuchen, hinzufügen
box-sizing: border-box;
Es ist in der Lage, einen festen Wert, So können Sie verwenden Sie diese Einheit, um es im Vollbildmodus anzuzeigen:
Aber Sie benötigen, zu prüfen, die Kompatibilität, Hier ist ein link über die Kompatibilität:
http://caniuse.com/#search=vw