Bootstrap 3 has-Feedback-Symbol Ausrichtung mit Feld Sizing scheint nicht zu arbeiten

Question

Ich versuche, die has-Feedback-Formular-Klasse verwenden, um ein Symbol in einem Formularfeld hinzuzufügen, jedoch mit Eingabefeld Sizing, das Symbol wird angezeigt die Grenzen ist, unter jsfiddle des Problems:

jsfiddle

<div class="container"> 


<div class="row col-md-6"> 
     <form name="form"> 
      <div class="form-group has-feedback"> 
       <label class="control-label" for="userName">Username (BROKEN)</label> 
       <div class="row"> 
        <div class="col-sm-5"> 
         <input type="text"required class="form-control" /> 
         <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
        </div> 
       </div> 
      </div> 
      <div class="form-group has-feedback"> 
       <label class="control-label" for="userName">Username (WORKS)</label> 
       <input type="text"required class="form-control" /> 
       <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
      </div> 
     </form> 
    </div> 
</div> 

Es funktioniert nur, wenn das Feld der Standardgrößen hat, die 100% der enthaltenden Form ist.

Haben Sie Ideen, wie Sie die Feldgröße steuern und das Symbol korrekt anzeigen können?

Answer 1

Hatte das gleiche Problem gestern.

Gelöst, indem Sie diese CSS hinzufügen. Bearbeiten Sie einfach die obere und rechte Position, um sie Ihrem Design anzupassen.

.has-feedback .form-control-feedback { 
    position: absolute; 
    top: 3px; 
    right: 15px; 
    display: block; 
    width: 34px; 
    height: 34px; 
    line-height: 34px; 
    text-align: center; 
} 

Answer 2

Ich hatte ein ähnliches Problem heute. Ich wollte ein Symbol aus dem Bootstrap nach einem Eingabeelement in einer Tabelle hinzufügen. Aber ich sah das gleiche Problem, das Symbol wurde in der nächsten Zeile gerendert.

Vorher:

<input type="text" class="form-control input-sm" name="loginnaam" style="width:220px" size="20" value="<?echo $db[loginnaam] ?>"><span class="glyphicon glyphicon-ok"></span> 

löste ich es durch ein div um das Eingangselement mit Schwimmer Zugabe: links:

<div style="float: left;"> 
    <input type="text" class="form-control input-sm" name="loginnaam" style="width:220px" size="20" value="<?echo $db[loginnaam] ?>"> 
</div> 
<span class="glyphicon glyphicon-ok"></span> 

Das Symbol wird angezeigt jetzt nach das Eingangselement auf dem gleichen Linie. Das löste das Problem für mich.

Answer 3

Ich finde die oben erwähnte absolute Positionierung Antwort hat ein paar Probleme - insbesondere wo ein Label erstreckt sich auf zwei Zeilen und Eingaben als Textfelder.

Als Experiment ich die glyphicon bewegt habe mehr inline mit der Nachricht zu sein, aufgenommen in einigen anderen Eingangstypen und in einiger Arie Güte bestreut:

http://jsfiddle.net/Nickelliott/kCcL7/

<div class="form-group has-error has-feedback"> 
    <label class="control-label" for="inputError">Input with error with an extremely long label to see what happens when a label goes onto two lines.</label> 
    <input type="text" class="form-control" id="inputError" aria-invalid="true" aria-describedby="inputErrorText" /> 
    <span id="inputErrorText" class="help-block help-feedback">A block of help text that breaks onto a new line and may extend beyond one line. <span class="glyphicon glyphicon-remove form-control-feedback"></span></span> 
</div>