6

I am trying to use the has-feedback form class to add an icon on a form field, however with input field sizing, the icon is shown out of bounds, below is jsfiddle of the problem:

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>

It only works when the field has default sizing which is 100% of the containing form.

Any ideas how to control field size and allow to display icon correctly?

madth3
  • 7,275
  • 12
  • 50
  • 74
Val
  • 1,023
  • 3
  • 10
  • 21
  • If i have 3 Textbox in single line and while applying `.has-feedback` on first Textbox..it automatically displays all the 3 Textbox in Red colour..any comment on that? – Steve Jul 16 '16 at 12:31

3 Answers3

19

Had the same problem yesterday.

Solved it by adding this css. Just edit the top and right positions to suit your design.

.has-feedback .form-control-feedback {
    position: absolute;
    top: 3px;
    right: 15px;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}
Julien
  • 278
  • 2
  • 8
  • Thanks Julien, I wonder if that is a bug which they will fix in the future. – Val Feb 26 '14 at 18:27
  • 2
    I think it's been added into v3.1, but I've found the absolute positioning still causes issues (see answer below) – Sniffer Apr 22 '14 at 13:40
  • @Julien If i have 3 Textbox in single line and while applying `.has-feedback` on first Textbox..it automatically displays all the 3 Textbox in Red colour..any comment on that? – Steve Jul 16 '16 at 12:32
0

I had a similar problem today. I wanted to add an icon from bootstrap after an input element in a table. But i faced the same issue, the icon was rendered on the next line.

Before:

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

I solved it by adding a div around the input element with float: left:

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

The icon is now displayed after the input element on the same line. This solved the problem for me.

eheydenr
  • 1,000
  • 11
  • 10
0

I find the absolutely positioning answer mentioned above has a couple of issues - specifically where a label stretches onto two lines and inputs other than text-fields.

As an experiment I've moved the glyphicon to be more inline with the message, added in some other input types and sprinkled in some aria goodness:

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>
Sniffer
  • 6,242
  • 10
  • 45
  • 53