Ergebnis 1 bis 15 von 30
-
04-10-2016, 23:44 #1
Jungspund
- registriert
- 24-09-2016
- Beiträge
- 22
Text-Input wird in nächste "Zeile umgebrochen
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>
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>
Wie bekomme ich da einfach zwei Input nebeneinander die die Länge des Inputs haben, welches darunter ist?
Kleines Bild:
Danke & Gruß,
Jan
-
05-10-2016, 08:10 #2
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
AW: Text-Input wird in nächste "Zeile umgebrochen
du hast aber schon jede zeile in einer "row"?
-
05-10-2016, 08:33 #3
AW: Text-Input wird in nächste "Zeile umgebrochen
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.
-
05-10-2016, 12:24 #4
Jungspund
- registriert
- 24-09-2016
- Beiträge
- 22
AW: Text-Input wird in nächste "Zeile umgebrochen
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>
-
05-10-2016, 12:34 #5
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
-
05-10-2016, 12:57 #6
Jungspund
- registriert
- 24-09-2016
- Beiträge
- 22
AW: Text-Input wird in nächste "Zeile umgebrochen
Weil es hier steht:
CSS · Bootstrap
-
05-10-2016, 13:21 #7
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
AW: Text-Input wird in nächste "Zeile umgebrochen
es scheint an dem Input group um die checkbox zu liegen, was dort ja auch dort nicht hingehört.
-
05-10-2016, 13:29 #8
Jungspund
- registriert
- 24-09-2016
- Beiträge
- 22
AW: Text-Input wird in nächste "Zeile umgebrochen
Das heißt?
Bzw. die Input-Group braucht man doch, um das Icon am Ende des Textfeldes "anzudocken" ?Geändert von Jan42 (05-10-2016 um 13:33 Uhr)
-
05-10-2016, 13:36 #9
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
AW: Text-Input wird in nächste "Zeile umgebrochen
aber eine checkbox ist kein textfeld
-
05-10-2016, 13:44 #10
Jungspund
- registriert
- 24-09-2016
- Beiträge
- 22
AW: Text-Input wird in nächste "Zeile umgebrochen
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>
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/Geändert von Jan42 (05-10-2016 um 13:50 Uhr)
-
05-10-2016, 15:18 #11
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
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>
<div class="input-group col-xs-6">
in<div class="col-xs-6"><div class="input-group">...</div></div>
- - - Aktualisiert - - -
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>
Geändert von tsseh (05-10-2016 um 15:22 Uhr)
-
05-10-2016, 16:07 #12
Jungspund
- registriert
- 24-09-2016
- Beiträge
- 22
AW: Text-Input wird in nächste "Zeile umgebrochen
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 seinDann wäre es perfekt
-
05-10-2016, 16:59 #13
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
AW: Text-Input wird in nächste "Zeile umgebrochen
Code?
-
05-10-2016, 17:49 #14
Jungspund
- registriert
- 24-09-2016
- Beiträge
- 22
AW: Text-Input wird in nächste "Zeile umgebrochen
Exakt so wie du es gepostest hast. Aber in einem horizontal Form.
HTML-Code:<form class="form-income form-horizontal" role="form" id="form">
-
06-10-2016, 07:54 #15
Foren-Gott
- registriert
- 19-05-2008
- Beiträge
- 5.667
AW: Text-Input wird in nächste "Zeile umgebrochen
wenn ich um meinen geposteten code ein formular baue, ist alles bündig. bei einer zeile auch nicht weiter das problem
Ähnliche Themen
-
input type="text"-feld: mit jquery auf onchange-event reagieren ?????
Von jmar im Forum JavaScriptAntworten: 4Letzter Beitrag: 04-10-2010, 16:33 -
How to: Input-Elemente ordnen und einbinden; Feld ausblenden, wenn Url "text" enthält
Von wumbsie im Forum JavaScriptAntworten: 1Letzter Beitrag: 08-07-2010, 12:18 -
Aus Text wird Input Feld
Von the-styler im Forum JavaScriptAntworten: 7Letzter Beitrag: 18-11-2007, 21:43 -
input type = "text" decodiert html special nicht
Von mojo78 im Forum JavaScriptAntworten: 0Letzter Beitrag: 10-09-2007, 14:43 -
<input type=text> per "onclick" generieren
Von fablei im Forum JavaScriptAntworten: 1Letzter Beitrag: 22-04-2005, 13:06
Lesezeichen