Home>

In some cases,The feedback icon is not displayed correctly.by default,The bootstrap defines the feedback icon position as follows:

.has-feedback .form-control-feedback {
  top:25px;
  right:0;
}
.form-horizontal .has-feedback .form-control-feedback {
  top:0;
  right:15px;
}

By customizing the values ​​of the top and right attributes, you can adjust the feedback icon to its proper position.

Button group

.btn-group .form-control-feedback {
  top:0;
  right:-30px;
}
 <div>
    <label>gender</label>
    <div>
      <div data-toggle="buttons">
        <label>
          <input type="radio" name="gender" value="male" />male
        </label>
        <label>
          <input type="radio" name="gender" value="female" />female
        </label>
        <label>
          <input type="radio" name="gender" value="other" />other
        </label>
      </div>
    </div>
  </div>

Input group, drop-down menu

#productform .inputgroupcontainer .form-control-feedback,#productform .selectcontainer .form-control-feedback {
  top:0;
  right:-15px;
}
 <div>
    <label>amount</label>
    <div>
      <div>
        <span>€</span>
        <input type="text" name="amount" />
      </div>
    </div>
  </div>
<div>
    <label>color</label>
    <div>
      <select name="color">
        <option value="">choose a color</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="red">red</option>
        <option value="yellow">yellow</option>
        <option value="white">white</option>
      </select>
    </div>
  </div>
  • Previous Pattern matching of strings in C language data structures
  • Next vue v-on listen event details
  • Trends