Text-Input wird in nächste "Zeile umgebrochen

**Jan42** · 04-10-2016, 23:44

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-Code:

<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-Code:

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

Danke & Gruß,
Jan

**tsseh** · 05-10-2016, 08:10

du hast aber schon jede zeile in einer "row"?

**kkapsner** · 05-10-2016, 08:33

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.

**Jan42** · 05-10-2016, 12:24

Hi,

habe noch nie mit fiddle gearbeitet - hoffe es klappt:

https://jsfiddle.net/s1519pv9/1/

@tsseh: Nein, keine row divs darum, da ich der Meinung bin, dass das der form-group div übernimmt:

HTML-Code:

<div class="form-group">
...
</div>

**tsseh** · 05-10-2016, 12:34

Zitat von Jan42

Nein, keine row divs darum, da ich der Meinung bin, dass das der form-group div übernimmt:

wie kommst du darauf?

**Jan42** · 05-10-2016, 12:57

Weil es hier steht:
CSS · Bootstrap

**tsseh** · 05-10-2016, 13:21

es scheint an dem Input group um die checkbox zu liegen, was dort ja auch dort nicht hingehört.

**Jan42** · 05-10-2016, 13:29

Das heißt?

Bzw. die Input-Group braucht man doch, um das Icon am Ende des Textfeldes "anzudocken" ?

**tsseh** · 05-10-2016, 13:36

aber eine checkbox ist kein textfeld

**Jan42** · 05-10-2016, 13:44

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-Code:

<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/

**tsseh** · 05-10-2016, 15:18

Zitat von Jan42

Ja schon klar. Ich habe die class input-group mal entfernt. Aber das ändert nichts..

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

Zitat von Jan42

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:

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>

**Jan42** · 05-10-2016, 16:07

Das wird immer besser

Ich nutze Bootstrap v3.3.7.

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

Jetzt müssten die Textfelder nur noch bündig sein

Dann wäre es perfekt

**tsseh** · 05-10-2016, 16:59

Code?

**Jan42** · 05-10-2016, 17:49

Exakt so wie du es gepostest hast. Aber in einem horizontal Form.

HTML-Code:

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

(und das alles in einem Modal, aber das dürfte egal sein....hoffe ich)

**tsseh** · 06-10-2016, 07:54

wenn ich um meinen geposteten code ein formular baue, ist alles bündig. bei einer zeile auch nicht weiter das problem

Thema: Text-Input wird in nächste "Zeile umgebrochen

LinkBack

Themen-Optionen

Anzeige

Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

AW: Text-Input wird in nächste "Zeile umgebrochen

Ähnliche Themen

input type="text"-feld: mit jquery auf onchange-event reagieren ?????

How to: Input-Elemente ordnen und einbinden; Feld ausblenden, wenn Url "text" enthält

Aus Text wird Input Feld

input type = "text" decodiert html special nicht

<input type=text> per "onclick" generieren

Lesezeichen

Lesezeichen

Berechtigungen