04.01.2016, 11:55
|
|||
|
|||
Flexbox Zeilenumrbuch auf Android-Smartphone funktioniert nicht
Hallo zusammen,
ich habe folgendes Formular auf meiner Seite im Einsatz: Code:
<fieldset> <legend>Flexibles Formular</legend> <form> <div class="flex-wrapper"> <div class="flexbox"> <h2>Was?</h2> <label for="posttype1"> <input type="checkbox" id="posttype1" value="p1" /> Posttype 1 </label><br /> <label for="posttype2"> <input type="checkbox" id="posttype2" value="p2" /> Posttype 2 </label><br /> <label for="posttype3"> <input type="checkbox" id="posttype3" value="p3" /> Posttype 3 </label> </p> </div> <div class="flexbox"> <h2>Wer?</h2> <p> <label for="target1"> <input type="checkbox" id="target1" value="t1" /> Zielgruppe 1 </label><br /> <label for="target2"> <input type="checkbox" id="target2" value="t2" /> Zielgruppe 2 </label><br /> <label for="target4"> <input type="checkbox" id="target3" value="t3" /> Zielgruppe 3 </label> </p> </div> <div class="flexbox"> <h2>Warum?</h2> <p> <label for="reason1"> <input type="checkbox" id="reason1" value="r1" /> Grund 1 </label><br /> <label for="reason2"> <input type="checkbox" id="reason2" value="r2" /> Grund 2 </label><br /> <label for="reason3"> <input type="checkbox" id="reason3" value="r3" /> Grund 3 </label> </p> </div> <div class="flexbox"> <h2>Umkreis?</h2> <p style="margin-bottom: 15px;"> <label for="radius"> <select id="radius" name="radius"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="25">25</option> <option value="50">50</option> </select> km </label> </p> <input type="submit" name="submit" value="Suche starten"> </div> </div> </form> </fieldset> Code:
.flex-wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; }
.flexbox { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 10px; margin: 5px 10px 5px 0; }
.flex-wrapper div:last-child { margin-right: 0; }
Auf meinem Android-Smartphone werden die .flexbox-Elemente jedoch ineinander geschoben und es findet kein Zeilenumbruch statt. Hat jemand eine Ahnung was das Problem sein könnte? Danke!
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden 
|
| Sponsored Links |
|
04.01.2016, 15:36
|
|||
|
|||
Ja, die Idee hatte ich auch, hat leider nichts gebracht..
Ich habe ein S5 Mini, also nicht sooo alt. Wenn ich die Formatierung der .flexbox komplett entferne werden die einzelnen Bereiche nicht ineinander geschoben, das CSS wird also anscheinend schon von meinem Smartphone verarbeitet, nir leider falsch. Hier mal ein Link zum Formular: http://uwebsite.de/test.html Gruß, Uwe
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden
|
|
04.01.2016, 16:26
|
|||
|
|||
|
Hallo
probiere mal folgendes aus: Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flexbox Formular</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flexbox {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
margin: 5px 10px 5px 0;
}
.flex-wrapper div:last-child {
margin-right: 0;
}
label {
white-space: nowrap;
}
</style>
</head>
<body>
<fieldset>
<legend>Flexibles Formular</legend>
<form>
<div class="flex-wrapper">
<div class="flexbox">
<h2>Was?</h2>
<p>
<label for="posttype1">
<input type="checkbox" id="posttype1" value="p1" /> Posttype 1
</label>
<br />
<label for="posttype2">
<input type="checkbox" id="posttype2" value="p2" /> Posttype 2
</label>
<br />
<label for="posttype3">
<input type="checkbox" id="posttype3" value="p3" /> Posttype 3
</label>
</p>
</div>
<div class="flexbox">
<h2>Wer?</h2>
<p>
<label for="target1">
<input type="checkbox" id="target1" value="t1" /> Zielgruppe 1
</label>
<br />
<label for="target2">
<input type="checkbox" id="target2" value="t2" /> Zielgruppe 2
</label>
<br />
<label for="target3">
<input type="checkbox" id="target3" value="t3" /> Zielgruppe 3
</label>
</p>
</div>
<div class="flexbox">
<h2>Warum?</h2>
<p>
<label for="reason1">
<input type="checkbox" id="reason1" value="r1" /> Grund 1
</label>
<br />
<label for="reason2">
<input type="checkbox" id="reason2" value="r2" /> Grund 2
</label>
<br />
<label for="reason3">
<input type="checkbox" id="reason3" value="r3" /> Grund 3
</label>
</p>
</div>
<div class="flexbox">
<h2>Umkreis?</h2>
<p style="margin-bottom: 15px;">
<label for="radius">
<select id="radius" name="radius">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="25">25</option>
<option value="50">50</option>
</select> km
</label>
</p>
<input type="submit" name="submit" value="Suche starten">
</div>
</div>
</form>
</fieldset>
</body>
</html>
MrMurphy
|
|
04.01.2016, 17:00
|
|||
|
|||
|
Super, jetzt klappt es. Danke!
__________________
Vegweiser.de - vegane & vegetarische Anbieter finden
|
 |
| Stichwörter |
| android, flew, flexbox, row, smartphone, wrap, wrapper |
| Themen-Optionen | |
| Ansicht | |
|
|
Linear-Darstellung
