|
|||
Dynamische Inputfeld-Breite mit Label
Hallo Forum,
ich bastel gerade an einer Eingabemaske, die sich dynamisch an die Browserbreite anpassen soll. Irgendwie bekomme ich es nicht hin, alles auf die gleiche Breite zu bringen, wenn eine unterschiedliche Anzahl von Elementen in einer Zeile ist. CSS: HTML-Code:
#wrapper{ display: flex; white-space:nowrap; } #left-div{ flex: 1; ackground: lightgreen; } #right-div{ width: 30%; min-width:350px; } ul{ list-style-type: none; } ul li{ white-space:nowrap; padding-bottom:4px; } input{ width:100%; box-sizing:border-box; } .first-block{margin-right:70px;} .first-block label,.second-block label,.third-block label{ display: block; float: left; padding-top:2px; } .first-block label{width:105px;} .second-block label{width:70px;} .third-block label{width:105px;} .cell{ display: inline-block; vertical-align:top; width: 50%; } .cell2 { display: inline-block; vertical-align:top; width: 100%; } HTML-Code:
<div id="wrapper"> <div id="left-div"> <ul class="first-block cell"> <li> <label for="eins">eins</label> <input type="text" name="eins" id="eins"> </li> <li> <label for="zwei">zwei</label> <input type="text" name="zwei" id="zwei"> </li> </ul> <ul class="second-block cell"> <li> <label for="drei">drei</label> <input type="text" name="drei" id="drei"> </li> </ul> <div tyle="clear:both"></div> <ul class="third-block cell2"> <li> <label for="vier">vier</label> <input type="text" name="vier" id="vier"> </li> </ul> </div> <div id="right-div"> </div> </div> Geändert von user2017 (05.01.2017 um 14:42 Uhr) |
Sponsored Links |
|
|||
Hallo
Du machst dir selbst das HTML-Leben unnötig schwer indem du unterschiedliche Layoutmöglichkeiten zusammenhanglos mixt. Eine Liste (ul-Element) ist nicht notwendig. Wenn Elemente mit einer Breite von 100% (input) neben anderen Elementen (label) stehen sollen sind Probleme vorprogrammiert. Bei width sind Breiten von über 100% in der Regel unsinnig. Ich würde den Quelltext im body-Bereich vereinfachen und das Layout auf Flexbox beschränken. Die Größenangaben und Abstände können natürlich noch angepasst werden. Außerdem sollte gleich ein Responsive Design berücksichtigt werden. Mein Vorschlag: HTML-Code:
<div id="emaske"> <div> <label for="eins">eins</label> <input id="eins" name="eins" type="text"> </div> <div> <label for="zwei">zwei</label> <input id="zwei" name="zwei" type="text"> </div> <div> <label for="drei">drei</label> <input id="drei" name="drei" type="text"> </div> <div> <label for="vier">vier</label> <input id="vier" name="vier" type="text"> </div> </div> Code:
/*#emaske*/ @media all { #emaske { background-color: lightgreen; max-width: 1000px; padding: 1rem; margin: 1rem; } #emaske div:nth-last-child(1n+2) { margin: 0rem 0rem 1rem 0rem; } #emaske label { display: block; width: 100%; } #emaske input { display: block; width: 100%; } } @media only screen and (min-width: 400px) { #emaske div { display: flex; } #emaske label { text-align: right; padding: 0rem 0.5rem 0rem 0rem; flex-grow: 0; flex-shrink: 0; flex-basis: 3rem; } #emaske input { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 3.5rem - 0rem - 0px - 0rem); } } @media only screen and (min-width: 600px) { #emaske { display: flex; flex-wrap: wrap; } #emaske>div { padding: 0.5rem; } #emaske div:nth-last-child(1n+2) { margin: 0rem 0rem 0rem 0rem; } #emaske>div:nth-child(-1n+3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(50% - 1rem - 0px - 0rem); } #emaske>div:nth-child(4) { margin: 2rem 0rem 0rem 0rem; flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 1rem - 0px - 0rem); } #emaske>div:nth-child(1) { order: 1; } #emaske>div:nth-child(2) { order: 3; } #emaske>div:nth-child(3) { order: 2; } #emaske>div:nth-child(4) { order: 4; } } http://boratb.bplaced.net/index03.html Gruss MrMurphy Geändert von MrMurphy (05.01.2017 um 17:18 Uhr) |
Sponsored Links |
|
|||
Hey MrMurphy,
danke für die schnelle und super Antwort. Mit Flexbox hatte ich mich noch nicht wirklich beschäftigt, scheint das Leben aber stark zu vereinfachen. Schaue ich mir auf jeden Fall mal bei Gelegenheit genauer an. So responsive muss das für dieses Projekt gar nicht sein, aber good to know. Ich werde mal etwas mit Flex rumdoktorn, da das nur ein Ausschnitt aller Elemente war und mein (wahrscheinlich optimierbares) Ergebnis dann posten. Aber ein paar erste Fragen: 1. Nach meiner Rechnung ist das 2., 3., 4. Element betroffen. Warum gerade das 4. nicht? Code:
#emaske div:nth-last-child(1n+2) { margin: 0rem 0rem 1rem 0rem; } 3. Was genau bedeutet folgende Deklaration, also warum wird der Wert so kalkuliert? Code:
flex-basis: calc(50% - 1rem - 0px - 0rem); |
|
|||
Hallo
Zitat:
Ein Abstand unter dem 4. Element gefällt mir optisch nicht. Die farbige Fläche unter dem 4. Element wäre sonst deutlich größer als über dem 1. Element. Wie schon geschrieben kannst du den natürlich so anpassen wie es dir am Besten gefällt. Zitat:
Für ein kleines Fallback habe ich die Vorgehensweise Mobile First gewählt. Zunächst befinden sich label und input sowie die umgebenden div bei schmalen Fenstern übereinander. Flexbox wird noch nicht verwendet. Ab 400px sind label und input dann nebeneinander, die div aber weiterhin untereinander. Ab 600px habe ich die Maske dann deiner Vorgabe angepasst. Zitat:
Beim content-box-Modell besteht die Gesamtbreite von Elementen aus ihrer Breite (width) + padding + border + margin. Um die Übersicht zu erhöhen und spätere Änderungen zu erleichtern trage ich alle 4 Größen deshalb grundsätzlich in der Reihenfolge mit den hauptsächlich von mir verwendeten Einheiten (% rem px rem) ein. In dem Beispiel soll das Element genau 50% breit sein. Als padding ist 1rem (2 mal 0.5rem) hinterlegt. border und margin haben (noch) keine Werte. So stehen zwei Elemente nebeneinander. Falls die Elemente sich nicht so wie von mir erwartet verhalten kann ich so direkt nachvollziehen und kontrollieren, ob die Angaben für padding, border und margin passen. Bei 5 Werten Code:
flex-basis: calc(100% - 3.5rem - 0rem - 0px - 0rem); Hinweis: Die Werte meines Testbeispiels weichen inzwischen etwas von den geposteten ab. Das Prinzip ist aber gleich geblieben. So sind die Break-Points bei 500px und 800px. Gruss MrMurphy Geändert von MrMurphy (05.01.2017 um 20:50 Uhr) |
|
|||
Hey,
danke für die Erklärungen, MrMurphy. Ich habe die Maske nun etwas erweitert und stoße auf ein neues Problem. Selectboxen und Textareas verhalten sich etwas anders als Input-Felder. Ich habe das jetzt mit box-sizing:border-box; gelöst. Code:
#emaske input,#emaske select,#emaske textarea{ flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 7.5rem - 0rem - 0px - 0rem); box-sizing:border-box; } Hier nochmal der neue Code: CSS: Code:
/*#emaske*/ @media all { #emaske { background-color: lightgreen; max-width: 1000px; padding: 1rem; margin: 1rem; } #emaske div:nth-last-child(1n+2) { margin: 0rem 0rem 1rem 0rem; } #emaske label { display: block; width: 100%; } #emaske input { display: block; width: 100%; } } @media only screen and (min-width: 700px) { #emaske div { display: flex; } #emaske label { text-align: left; padding: 0rem 0.5rem 0rem 0rem; flex-grow: 0; flex-shrink: 0; flex-basis: 7rem; } #emaske input,#emaske select,#emaske textarea{ flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 7.5rem - 0rem - 0px - 0rem); box-sizing:border-box; } } @media only screen and (min-width: 900px) { #emaske { display: flex; flex-wrap: wrap; } #emaske>div { padding: 0.5rem; } #emaske div:nth-last-child(1n+2) { margin: 0rem 0rem 0rem 0rem; } #emaske>div:nth-child(-1n+6) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(50% - 1rem - 0px - 0rem); } #emaske>div:nth-child(n+7) { margin: 0rem 0rem 0rem 0rem; flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 1rem - 0px - 0rem); } #emaske>div:nth-child(7) { margin: 1rem 0rem 0rem 0rem; } #emaske>div:nth-child(1) { order: 1; } #emaske>div:nth-child(2) { order: 3; } #emaske>div:nth-child(3) { order: 5; } #emaske>div:nth-child(4) { order: 2; } #emaske>div:nth-child(5) { order: 4; } #emaske>div:nth-child(6) { order: 6; } #emaske>div:nth-child(7) { order: 6; } #emaske>div:nth-child(8) { order: 8; } #emaske>div:nth-child(9) { order: 9; } #emaske>div:nth-child(10) { order: 10; } } input[type=checkbox]{ visibility:hidden; } input[type=checkbox] + label:after{ content: ""; width:17px; height:17px; float:left; border:1px solid #d4d4d4; display:inline-block; cursor:pointer; font-family:FontAwesome; -moz-box-shadow:3px 3px 3px rgba(29,29,28,.1) inset; -webkit-box-shadow:3px 3px 3px rgba(29,29,28,.1) inset; -khtml-box-shadow:3px 3px 3px rgba(29,29,28,.1) inset; box-shadow:3px 3px 3px rgba(29,29,28,.1) inset; -webkit-transform: scale(1,1); background:#fff; } input[type=checkbox]:checked + label:after{ content: ""; font-family: FontAwesome; font-size: 12px; color: #444444; text-align: center; line-height: 17px; -webkit-box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1); -moz-box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1); box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1); } HTML-Code:
<div id="emaske"> <div> <label for="eins">xxxxxx</label> <input type="text" name="eins" id="eins" value="eins"> </div> <div> <label for="zwei">xxxxxxxxx</label> <select name="zwei" id="zwei"> <option>zwei</option> </select> </div> <div> <label for="drei">xxxxxxxxxxx</label> <select name="drei" id="drei"> <option>drei</option> </select> </div> <div> <label for="vier">xxxx</label> <input type="text" name="vier" id="vier" value="vier"> </div> <div> <label for="fuenf">xxxxxx</label> <input type="text" name="fuenf" id="fuenf" value="fuenf"> </div> <div> <label for="sechs">xxxxxxxxx</label> <input id="sechs" type="checkbox" style="position:absolute;left:0;"> <label for="sechs"></label> </div> <div> <label for="sieben">xxxxxxx</label> <input type="text" name="sieben" id="sieben" value="sieben"> </div> <div> <label for="acht">xxxxxxxxxxxxx</label> <input type="text" name="acht" id="acht" value="acht"> </div> <div> <label for="neun">xxxxxxxxxxxxxx</label> <input type="text" name="neun" id="neun" value="neun"> </div> <div> <label for="zehn">xxxxxx</label> <textarea name="zehn" id="zehn" style="height:6rem">zehn</textarea> </div> </div> user2017 Geändert von user2017 (06.01.2017 um 16:20 Uhr) |
|
|||
Hallo
Zunächst zu deinem Problem. Ersetze Code:
@media all { ... #emaske label { display: block; width: 100%; } #emaske input { display: block; width: 100%; } } Code:
@media all { ... #emaske label, #emaske input, #emaske select, #emaske textarea { display: block; width: 100%; } } Also im HTML HTML-Code:
<div> <label for="zehn">xxxxxx</label> <textarea name="zehn" id="zehn" style="height:6rem">zehn</textarea> </div> HTML-Code:
<div> <label for="zehn">xxxxxx</label> <textarea name="zehn" id="zehn">zehn</textarea> </div> Code:
@media all { #emaske textarea { height: 6rem; } } Du kannst deine Webseite natürlich erstellen wie du willst. Deshalb sind die Antworten auch für Drittleser gedacht, die sich mit HTML / CSS nicht so gut auskennen. Deshalb noch dieser Hinweis: Das HTML-Code:
<div> <label for="sechs">xxxxxxxxx</label> <input id="sechs" type="checkbox" style="position:absolute;left:0;"> <label for="sechs"></label> </div> Deshalb finde ich sinnvoller HTML-Code:
<div class="cbox"> <input id="sechs" name="sechs" type="checkbox"> <label for="sechs">xxxxxxxxx</label> </div> Code:
input[type=checkbox] { visibility: hidden; } input[type=checkbox] + label::after { content: ""; width: 17px; height: 17px; float: left; border: 1px solid #d4d4d4; display: inline-block; cursor: pointer; font-family: FontAwesome; -moz-box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset; -webkit-box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset; -khtml-box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset; box-shadow: 3px 3px 3px rgba(29, 29, 28, .1) inset; -webkit-transform: scale(1, 1); background: #fff; } input[type=checkbox]:checked + label::after { content: ""; font-family: FontAwesome; font-size: 12px; color: #444444; text-align: center; line-height: 17px; -webkit-box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1); -moz-box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1); box-shadow: inset 3px 3px 3px 0px rgba(29, 29, 28, 0.1); } In diesem Fall verwende ich die Klasse (hier cbox) da Checkboxen und Radiobuttons nur schwierig anzupassen sind und sie damit einfacher mit CSS angesprochen werden können. Das CSS dazu lautet dann Code:
@media all { #emaske .cbox { display: flex; flex-wrap: wrap; align-items: baseline; } #emaske .cbox input { margin-left: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 1rem; order: 2; } #emaske .cbox label { order: 1; } } Wenn das soweit funktioniert kann eine Lösung gesucht werden um den Checkbox-Kasten durch eine andere Darstellung zu ersetzen. Die Voraussetzungen für den Checkbox-Hack (input im Quelltext vor label) sind gegeben und bleiben es auch, wenn die Reihenfolge im Browser mittels Flexbox anders herum angezeigt wird. Gruss MrMurphy |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dynamische Breite von inline-block-Divs | Change | CSS | 8 | 16.12.2013 17:01 |
Problem mit dynamische Breite | Crys | CSS | 2 | 03.09.2009 13:44 |
2 Spalten - dynamische Breite | Zeussi | CSS | 1 | 20.08.2009 12:29 |
Design - dynamische Breite? | RiChY | CSS | 6 | 26.02.2007 23:40 |
overflow problem: IE dynamische breite vs FF | anj | CSS | 9 | 12.10.2006 12:53 |