• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Text-Input wird in nächste "Zeile umgebrochen

J

Jan42

New member
Hi,

ich bastel gerade an einem Formular und habe folgendes Problem.
Das Formular basiert auf dem Bootstrap Grid und die einzelnen Formularfelder sind immer wie folgt definiert:

HTML: 
<form class="form-income form-horizontal" role="form" id="form">
.....
<div class="form-group">
<label for="" class="control-label col-xs-3">Priorisiert</label>
     <div class="input-group col-xs-8"> 
           <input class="form-control" type="text" name="prio"><span class="glyphicon glyphicon-earphone form-control-feedback"></span>
     </div>
</div>
</form>

Das klappt auch soweit gut...sofern man pro Zeile immer ein Label und rechts davon ein Input Feld hat.
Jetzt habe ich in einer Zeile eine Besonderheit und zwar möchte ich links das Label haben und daneben 2 Input Felder nebeneinander (die dann halt halb so groß sind).
Also dachte ich mache ich das einfach in dem ich den einen div mit col-xs-8 durch zwei divs mit col-xs-4 (bzw. col-xs-2 und cols-xs-6) ersetze:

HTML: 
<div class="form-group">
<label for="" class="control-label col-xs-3">Mengenkategorien:</label>
          <div class="input-group col-xs-2"> 
			<input type="checkbox" name="ml500" value="500" class="form-control"><label>500ml</label>
            </div>
            <div class="input-group col-xs-6"> 	
			<input class="form-control" type="text" name="500p"><span class="glyphicon glyphicon-phone-alt form-control-feedback"></span>
            </div>
        </div>

Das klappt aber nicht... er bricht mir das zweite Input Feld immer in die nächste Zeile um.... und meine Frage ist:
Wie bekomme ich da einfach zwei Input nebeneinander die die Länge des Inputs haben, welches darunter ist?

Kleines Bild:

41fd1068cb.png


Danke & Gruß,
Jan
 
Eine Möglichkeit könnt sein, das öffnente Tag direkt an das schließende anzuhängen, also ohne neue Zeile und Einrückung: </div><div ...>.

Aber ein Link, wo wir uns das live ansehen können, kann da Sicherheit bringen.
 
es scheint an dem Input group um die checkbox zu liegen, was dort ja auch dort nicht hingehört.
 
Das heißt?

Bzw. die Input-Group braucht man doch, um das Icon am Ende des Textfeldes "anzudocken" ?
 
Zuletzt bearbeitet:
Ja schon klar. Ich habe die class input-group mal entfernt. Aber das ändert nichts..
Ich hab die checkbox auch mal ganz rausgenommen und durch Text ersetzt. Dann bricht er mir aber das 2. form-group auch komplett in die nächste Zeile:

HTML: 
<div class="row">
	<div class="form-group">
            <label for="" class="control-label col-xs-3">Priorisiert</label>
            <div class="input-group col-xs-4"> 
                <input class="form-control" type="text" name="prio"><span class="glyphicon glyphicon-earphone form-control-feedback"></span>
            </div>
        </div>
	<div class="form-group">
			<label for="500p" class="control-label col-xs-2">ABC:</label>
		<div class="input-group col-xs-2"> 
			<input class="form-control" type="text" name="500p" id="500p"><span class="glyphicon glyphicon-phone-alt form-control-feedback"></span>
                </div>

       </div>	
</div>

Neues Fiddle:
https://jsfiddle.net/a85kpvLb/

(hab auch mal nen row div ergänzt...)

Das hier kommt dem Ziel näher, aber da verschiebt er mit irgendwie den Start..
https://jsfiddle.net/ymq5omc4/
 
Zuletzt bearbeitet:
Jan42 schrieb:
Ja schon klar. Ich habe die class input-group mal entfernt. Aber das ändert nichts..
Zum Vergrößern anklicken....
bei mir ist dann alles auf einer zeile
Code: 
<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="form-group">
<label for="" class="control-label col-xs-3">Mengenkategorien:</label>
          <div class="col-xs-2"> 
			<input type="checkbox" name="ml500" value="500" class="form-control"><label>500ml</label>
            </div>
            <div class="input-group col-xs-6"> 	
			<input class="form-control" type="text" name="500p"><span class="input-group-addon glyphicon glyphicon-phone-alt form-control-feedback"></span>
            </div>
        </div>	
    </div>
  </body>
</html>

welche version hast du? trenn mal das <div class="input-group col-xs-6"> in <div class="col-xs-6"><div class="input-group">...</div></div>

- - - Aktualisiert - - -

Jan42 schrieb:
Ich hab die checkbox auch mal ganz rausgenommen und durch Text ersetzt. Dann bricht er mir aber das 2. form-group auch komplett in die nächste Zeile:
Zum Vergrößern anklicken....
da hast du ja aber wieder ein <div class="form-group"> um die beiden textboxen, welches in v4 eine neue zeile aufmacht und in v3 vermutlich probleme macht. das geht bei mir mit v3 und v4:

Code: 
<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
	    <div class="form-group">
        <label for="" class="control-label col-xs-3">Priorisiert</label>
        <div class="col-xs-4"> 
          <div class="input-group"> 
            <input class="form-control" type="text" name="500p" id="500p"><span class="input-group-addon glyphicon glyphicon-phone-alt form-control-feedback"></span>
          </div>
        </div>
        <div class="col-xs-2"> 
			    <label for="500p" class="control-label">ABC:</label>
			  </div> 
			  <div class="col-xs-2"> 
  		    <div class="input-group"> 
  			    <input class="form-control" type="text" name="500p" id="500p"><span class="input-group-addon glyphicon glyphicon-phone-alt form-control-feedback"></span>
          </div>
        </div>  
      </div>
    </div>
  </body>
</html>
 
Zuletzt bearbeitet:
Das wird immer besser ;)

Ich nutze Bootstrap v3.3.7.

Wenn ich deinen Code nutze sieht es bei mir so aus:

5096dc1c96.png


Jetzt müssten die Textfelder nur noch bündig sein ;) ;) Dann wäre es perfekt :)
 
Exakt so wie du es gepostest hast. Aber in einem horizontal Form.

HTML: 
<form class="form-income form-horizontal" role="form" id="form">

(und das alles in einem Modal, aber das dürfte egal sein....hoffe ich)
 
wenn ich um meinen geposteten code ein formular baue, ist alles bündig. bei einer zeile auch nicht weiter das problem
 
Wirklich? Das ist mir neu.
Du siehst doch dass ich nicht nur eine Zeile habe ;) Ich probiere mal weiter...

#Update: Wenn ich in deinen Code eine zweite Zeile einfüge, dann sind die Textfelder nicht bündig... Gleiches "Phänomen" wie bei mir...
 
Zuletzt bearbeitet:
Gerne :)

HTML: 
			<form class="form-income form-horizontal" role="form" id="editForm">
		<div class="form-group">
        <label for="" class="control-label col-xs-3">Priorisiert</label>
        <div class="col-xs-4"> 
          <div class="input-group"> 
            <input class="form-control" type="text" name="500p" id="500p"><span class="glyphicon glyphicon-phone-alt form-control-feedback"></span>
          </div>
        </div>
        <div class="col-xs-2"> 
			    <label for="500p" class="control-label">ABC:</label>
			  </div> 
			  <div class="col-xs-2"> 
  		    <div class="input-group"> 
  			    <input class="form-control" type="text" name="500p" id="500p"><span class="glyphicon glyphicon-phone-alt form-control-feedback"></span>
          </div>
        </div>  
      </div>
		<div class="form-group">
            <label for="" class="control-label col-xs-3">Telefax</label>
            <div class="input-group col-xs-8"> 
                <input class="form-control" type="text" name="modal_telefax"><span class="glyphicon glyphicon-phone-alt form-control-feedback"></span>
            </div>
        </div>	
	</form>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben