iOS HTML5-Datumsauswahl akzeptiert keine Breite: 100%;

Ich habe eine HTML5-Datumsauswahl in meinem Formular für eine mobile Version meiner Website. Alle meine Texteingaben sind auf width: 100% gesetzt und die Eltern-td ist auf padding-right gesetzt: 15px, um es passend zu machen. Das bedeutet, dass meine Felder schön formatiert sind und so angepasst werden, dass sie immer die Hälfte des Containers ausfüllen, wenn sich die Ausrichtung des Geräts ändert. Die Datumsauswahl verhält sich jedoch nicht auf die gleiche Weise, kann jemand helfen?iOS HTML5-Datumsauswahl akzeptiert keine Breite: 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>

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

Quelle

2013-05-02 cainy393

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

Verwendung Breite 100% für Tisch # Form und min-width Zugabe: 100% für .tbox, ich hoffe, dass dies Ihr Problem lösen könnte. aktualisiert die jsfiddle http://jsfiddle.net/brfQf/1/

Quelle

2013-05-02 18:42:50

Dies funktioniert wunderbar und sollte die richtige Antwort sein. – jmknoll

Es sieht aus wie .tbox beide eine Breite von 100% und eine Polsterung. Dies würde dazu führen, dass sich die Box außerhalb ihres gewünschten Bereichs erstreckt. Um dies zu lösen, die Sie könnten versuchen, box-sizing: border-box;

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

Quelle

2013-05-02 18:05:43 Hughes

Während dies tat mein Leben einfacher mit den Textfeldern machen, ist es nicht mein Problem nicht beheben mit dem Datumsauswahl – cainy393

Was ist die Datumsauswahl tut genau das ist nicht die gewünschte Wirkung? So sieht es aus, wenn ich ein JSFiddle daraus zusammensetze. http://jsfiddle.net/brfQf/ – Hughes

Auf dieser Geige, wenn Sie die Größe des Ausgabefensters ändern, um dünner zu sein, werden Sie sehen, dass die linke Hälfte dünner wird, während die rechte Hälfte die gleiche Größe behält. Dies tritt nicht auf, wenn die Datumsauswahl vorhanden ist. Auch auf meinem Handy, wenn ich in die Landschaft gehe, füllt es nicht die volle Größe. Mit anderen Worten, es scheint die Breite zu ignorieren: 100% und nur um 100 px fixiert zu sein. – cainy393

Diese CSS-Stil behebt das Problem in Mobile Safari:

-webkit-appearance: none;

Es ist jedoch Eingabe Aussehen ändert.

Quelle

2013-12-12 12:32:35

Das ist die richtige Antwort, спасибо, мужик :) –

Es Lage ist, einen festen Wert zu verwenden, so können Sie dieses Gerät verwenden, um es im Vollbild zu machen:

width: 100vw

Aber Sie brauchen, um ihre Kompatibilität zu prüfen, ist hier eine Verbindung über seine Kompatibilität:

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

Quelle

2016-01-22 09:33:50 Dudy

iOS HTML5-Datumsauswahl akzeptiert keine Breite: 100%;

Antwort

Verwandte Themen