web-dev-qa-db-fra.com

Bootstrap 3 Insertion de l'icône dans le champ de saisie

Je travaille dans Bootstrap 3 et j'essaie d'obtenir une icône de calendrier dans la partie droite du champ de saisie. 

Mon html ressemble à ceci:

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

J'ai essayé position: absolute comme ceci:

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

Mais lorsque je le ferai, il aura fière allure à un endroit, mais ne sera pas positionné correctement dans un autre cas.

J'ai également essayé de voir si je pouvais utiliser text-indent pour voir si cela fonctionnerait toujours, mais cela a eu le même effet.

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

Voici un jsFiddle qui pourrait aider

csstwitter-bootstraptwitter-bootstrap-3font-awesomeglyphicons
12
zazvorniki

Vous pouvez utiliser input-group add-on avec un input-group-btn.

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

Avec un peu de CSS pour cacher la bordure du bouton:

/* 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; 
}

Démo: http://bootply.com/128059

5
Zim

Utiliser les états de validation natifs de/bootstrap est probablement préférable à l'écriture de CSS personnalisé ici.
Et je suis à peu près sûr que c'est moi qui ai créé le CSS en question .

Utilisez simplement .has-feedback sur votre groupe de formulaires et .form-control-feedback sur votre icône:

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

Démo dans jsFiddle

 screenshot

10
KyleMit

Vérifiez ce violon , adapté de cette réponse

La différence étant que dans votre cas, le <i> a été placé après le <input>. Les échanger les fait fonctionner. C'est pourquoi le positionnement créait un désordre par opposition à la réponse citée.

2
scarecrow

Dans les réponses ci-dessus, le clic sur l'entrée fonctionne mais cliquez sur la balise i ne fonctionne pas .. donc j'ai ajouté mon code en réponse de @KyleMit

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

J'ai changé le css peu pour mon interface utilisateur. Vous pouvez aussi le changer.

<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