Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 30
  1. 04-10-2016, 23:44 #1
    Jan42
    Jan42 ist offline Jungspund
    registriert
    24-09-2016
    Beiträge
    22

    Cool 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>
    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
    Zitieren Zitieren
  2. 05-10-2016, 08:10 #2
    tsseh
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

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

    du hast aber schon jede zeile in einer "row"?
    Zitieren Zitieren
  3. 05-10-2016, 08:33 #3
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.706

    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.
    kkapsner.de
    Zitieren Zitieren
  4. 05-10-2016, 12:24 #4
    Jan42
    Jan42 ist offline 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>
    Zitieren Zitieren
  5. 05-10-2016, 12:34 #5
    tsseh
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

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

    Zitat Zitat von Jan42 Beitrag anzeigen
    Nein, keine row divs darum, da ich der Meinung bin, dass das der form-group div übernimmt:
    wie kommst du darauf?
    Zitieren Zitieren
  6. 05-10-2016, 12:57 #6
    Jan42
    Jan42 ist offline Jungspund
    registriert
    24-09-2016
    Beiträge
    22

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

    Weil es hier steht:
    CSS · Bootstrap
    Zitieren Zitieren
  7. 05-10-2016, 13:21 #7
    tsseh
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    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.
    Zitieren Zitieren
  8. 05-10-2016, 13:29 #8
    Jan42
    Jan42 ist offline 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)
    Zitieren Zitieren
  9. 05-10-2016, 13:36 #9
    tsseh
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

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

    aber eine checkbox ist kein textfeld
    Zitieren Zitieren
  10. 05-10-2016, 13:44 #10
    Jan42
    Jan42 ist offline 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>
    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/
    Geändert von Jan42 (05-10-2016 um 13:50 Uhr)
    Zitieren Zitieren
  11. 05-10-2016, 15:18 #11
    tsseh
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666
    Zitat Zitat von Jan42 Beitrag anzeigen
    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 Zitat von Jan42 Beitrag anzeigen
    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>
    Geändert von tsseh (05-10-2016 um 15:22 Uhr)
    Zitieren Zitieren
  12. 05-10-2016, 16:07 #12
    Jan42
    Jan42 ist offline 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 sein Dann wäre es perfekt
    Zitieren Zitieren
  13. 05-10-2016, 16:59 #13
    tsseh
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

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

    Code?
    Zitieren Zitieren
  14. 05-10-2016, 17:49 #14
    Jan42
    Jan42 ist offline 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">
    (und das alles in einem Modal, aber das dürfte egal sein....hoffe ich)
    Zitieren Zitieren
  15. 06-10-2016, 07:54 #15
    tsseh
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.666

    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
    Zitieren Zitieren
Seite 1 von 2 12 LetzteLetzte
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. input type="text"-feld: mit jquery auf onchange-event reagieren ?????
    Von jmar im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 04-10-2010, 16:33
  2. How to: Input-Elemente ordnen und einbinden; Feld ausblenden, wenn Url "text" enthält
    Von wumbsie im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 08-07-2010, 12:18
  3. Aus Text wird Input Feld
    Von the-styler im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 18-11-2007, 21:43
  4. input type = "text" decodiert html special nicht
    Von mojo78 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 10-09-2007, 14:43
  5. <input type=text> per "onclick" generieren
    Von fablei im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 22-04-2005, 13:06

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln