wake-up-neo.net

Bootstrap 3 Symbol in Eingabefeld setzen

Ich arbeite in Bootstrap 3 und versuche, auf der rechten Seite des Eingabefelds ein Kalendersymbol zu erhalten. 

Meine HTML sieht so aus:

<div class="col-md-12">
    <div class='right-inner-addon col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker"
               data-date-format="yyyy-mm-dd"/>
        <i class="fa fa-calendar"></i>
    </div>
</div>

Ich habe position: absolute so ausprobiert:

.right-inner-addon i {
    position: absolute;
    right: 5px;
    top: 10px;
    pointer-events: none;
    font-size: 1.5em;
}
.right-inner-addon {
    position: relative;
}

Aber wenn ich es mache, sieht es an einer Stelle gut aus, wird aber an anderer Stelle nicht richtig positioniert.

Ich habe auch versucht zu sehen, ob ich text-indent verwenden könnte, um zu sehen, ob dies durchgehend funktioniert, aber es hatte den gleichen Effekt.

.right-inner-addon i, 
.form-group .right-inner-addon i {
    display: inline-block;
    z-index: 3;
    text-indent: -15px;
    font-size: 1.3em;
}

Hier ist ein jsFiddle, das helfen könnte

12
zazvorniki

Sie können input-group add-on mit einem input-group-btn verwenden.

<div class="col-md-12">
    <div class='input-group add-on col-md-2 date datepicker' 
         data-date-format="yyyy-mm-dd">
        <input name='name' value="" type="text" class="form-control date-picker" 
               data-date-format="yyyy-mm-dd"/>
        <div class="input-group-btn">
            <button class="btn btn-default">
                <i class="fa fa-calendar"></i>
            </button>
        </div>
    </div>
</div>

Mit ein wenig CSS zum Ausblenden der Schaltfläche:

/* remove border between controls */
.add-on .input-group-btn > .btn {
    border-left-width: 0;
    left:-2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
    -webkit-box-shadow: none; 
            box-shadow: none;
    border-color:#cccccc; 
}

Demo: http://bootply.com/128059

5
Zim

Die Verwendung der systemeigenen Validierungszustände von bootstrap ist wahrscheinlich vorzuziehen, wenn Sie hier benutzerdefiniertes CSS schreiben.
Und ich bin mir ziemlich sicher, dass ich derjenige bin, der das fragliche CSS gefunden hat.

Verwenden Sie einfach .has-feedback für Ihre Formulargruppe und .form-control-feedback für Ihr Symbol:

<div class="form-group has-feedback">
    <label class="control-label sr-only">DatePicker</label>
    <input type="text" class="form-control date-picker" /> 
    <i class="fa fa-calendar form-control-feedback"></i>
</div>

Demo in jsFiddle

screenshot

10
KyleMit

Überprüfe diese Geige , angepasst von diese Antwort

Der Unterschied ist, dass in Ihrem Fall der <i> hinter <input> platziert wurde. Wenn sie ausgetauscht werden, funktioniert es. Aus diesem Grund verursachte die Positionierung im Gegensatz zu der zitierten Antwort ein Durcheinander.

2
scarecrow

In den obigen Antworten funktioniert der Eingabeklick, aber klicken Sie auf das Tag, das nicht funktioniert. Damit habe ich meinen Code als Antwort auf @KyleMit hinzugefügt

<div class="form-group has-feedback">
  <input type="text" name="txtDatepicker" class="form-control date-picker" /> 
  <i class="glyphicon glyphicon-calendar" 
    onclick="javascript:$('input[name=txtDatepicker]').data('DateTimePicker').show();">
  </i>
</div>

Ich habe CSS etwas für meine Benutzeroberfläche geändert. Sie können es auch ändern.

<style>
  .right-inner-addon {
    position: relative;
   }

    .right-inner-addon input {
        padding-right: 30px;
    }

    .right-inner-addon i {
        position: absolute;
        left: 256px;
        padding: 14px 12px;
    }
</style>
0
Bharat