zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dynamische Inputfeld-Breite mit Label

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.01.2017, 13:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2017
Beiträge: 3
user2017 befindet sich auf einem aufstrebenden Ast
Standard 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:
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>
Wäre für ein paar Tipps dankbar!

Geändert von user2017 (05.01.2017 um 14:42 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.01.2017, 16:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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>
und das CSS dazu

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;
      }
   }
Und noch ein temporärer Link zum direkten Ausprobieren:

http://boratb.bplaced.net/index03.html

Gruss

MrMurphy

Geändert von MrMurphy (05.01.2017 um 17:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.01.2017, 19:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2017
Beiträge: 3
user2017 befindet sich auf einem aufstrebenden Ast
Standard

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;
  	}
2. Ich sehe zwischen @media only screen and min-width: 400px bzw. min-width: 600px keinen Unterschied in der Darstellung. Was ist das Geheimnis?

3. Was genau bedeutet folgende Deklaration, also warum wird der Wert so kalkuliert?
Code:
flex-basis: calc(50% - 1rem - 0px - 0rem);
Vielen Dank im Voraus!
Mit Zitat antworten
  #4 (permalink)  
Alt 05.01.2017, 20:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
1. Nach meiner Rechnung ist das 2., 3., 4. Element betroffen. Warum gerade das 4. nicht?
Die Angabe sorgt für einen größeren unteren Abstand, damit die Zuordnung von label zu input durch den geringen Abstand deutlich wird.

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:
2. Ich sehe zwischen @media only screen and min-width: 400px bzw. min-width: 600px keinen Unterschied in der Darstellung. Was ist das Geheimnis?
Benutzt du vielleicht den Opera? Der läßt sich zumindest bei mir nicht unter 400px (bzw. jetzt 500px) zusammenschieben.

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:
3. Was genau bedeutet folgende Deklaration, also warum wird der Wert so kalkuliert?
Einige Browser verwenden bei Flexbox zwangsweise das content-box-Modell. Um Probleme zu vermeiden verwende ich es bei Flexbox deshalb generell, dann brauche ich für die Problembrowser keine Fallbacks.

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);
ist der zweite Wert die Breite eines anderen Elements (hier label) in der gleichen Zeile (in diesem Beispiel 3rem Breite + 0.5rem margin-rechts).

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 06.01.2017, 16:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2017
Beiträge: 3
user2017 befindet sich auf einem aufstrebenden Ast
Standard

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;
 }
Wenn ich jetzt aber unter 700px gehe, erstrecken die sich nicht auf 100% und die Checkbox verschiebt auch das Label darunter.

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:
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>
Danke
user2017

Geändert von user2017 (06.01.2017 um 16:20 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.01.2017, 03:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Unglücklich

Hallo

Zunächst zu deinem Problem.

Ersetze

Code:
@media all {
...
  #emaske label {
	 display: block;
	 width: 100%;
  }
  #emaske input {
	 display: block;
	 width: 100%;
  }
}
durch

Code:
@media all {
...
   #emaske label,
   #emaske input,
   #emaske select,
   #emaske textarea {
      display: block;
      width: 100%;
   }
}
Weiterhin solltest du auf inline-CSS verzichten.

Also im HTML

HTML-Code:
      <div>
         <label for="zehn">xxxxxx</label>
         <textarea name="zehn" id="zehn" style="height:6rem">zehn</textarea>
      </div>
durch

HTML-Code:
      <div>
         <label for="zehn">xxxxxx</label>
         <textarea name="zehn" id="zehn">zehn</textarea>
      </div>
ersetzen und im CSS

Code:
   @media all {
      #emaske textarea {
         height: 6rem;
      }
   }
hinzufügen. Dabei kannst du die Angaben natürlich in einen bereits bestehenden @media all-Block hinzufügen ohne einen neuen zu erstellen.

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>
geht für mich auch nicht. Es kann durchaus manchmal sinnvoll sein, HTML-Elemente doppelt einzufügen und wechselseitig anzuzeigen. So einen Fall kann ich aber hier nicht erkennen.

Deshalb finde ich sinnvoller

HTML-Code:
      <div class="cbox">
         <input id="sechs" name="sechs" type="checkbox">
         <label for="sechs">xxxxxxxxx</label>
      </div>
zu verwenden und

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);
      }
zunächst komplett wegzulassen. Solche Verschönerungen sollten erst eingefügt werden, wenn die Seite mit den Standardangaben funktioniert.

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;
      }
   }
So wird das label im Quelltext nach dem input aufgeführt, in den Browsern aber davor angezeigt. Das die CSS-Angaben in einen bereits bestehenden @media all-Block eingefügt werden können sollte inzwischen klar sein.

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:07 Uhr.