Bootstrap: form-control-feedback with input-group-addon

[iwarner]

When combining form-control-feedback and an input-group-addon the feedback icons are pushed outside the input box as the attached demonstrates

Setting the top: 25px to 0 if the input has an addon rectifies this position, however if the addon is appended then they will go over each other.

Maybe add to documentation also

[cvrebert]

Please post your example as a JS Fiddle, JS Bin, CodePen, or other form of live example.

[iwarner]

Hi please see this http://jsfiddle.net/eGexW/

[iwarner]

Taking the Feedback icon out of the form control group at least puts it in the correct position - probably some JS needs to fix the rest

http://jsfiddle.net/eGexW/1/

[mdo]

The input group with add-on in front works fine when you place the icon in the correct spot (read, not in the .input-group). See http://jsbin.com/hucic/1/edit.

As for the input group with the add-on on the right, there's nothing we can do but warn folks they'll need to adjust the CSS for that as they need. We have no way of knowing the width of the add-on's contents, and as such cannot place the feedback icon with 100% certainty. See the same JS Bin example linked above for an example of that with the fix applied.

Adding mention of this to the docs.

[iwarner]

Ok ta.

[EppO]

When I look into http://jsbin.com/hucic/1/edit, unlike @mdo stated, I don't see any feedback icon in the fields having a input-group, only in those without.
Am I missing something ?

[fchiumeo]

@EppO see this issue #13059

[JoryUK]

Just a notion on how you could possibly modify bootstrap to make this work, however it requires that the practice be feedback goes into the input-group and then applying special styling to that input group feedback item - to be inline block and margin left by its width
http://jsfiddle.net/eGexW/22/
Going to play with this and may use a version of it myself.

[michaelsogos]

Hi to all,

I'm using this solution to fix the issue:

.input-group .form-control-feedback {
  top: 1px;
}

[garygreen]

Just ran into this myself, that's pretty cool @JoryUK seems like a nice way to do this. @mdo any more thoughts on the implemention? http://jsfiddle.net/eGexW/22/

[twbs-lmvtfy]

Hi @garygreen!

You appear to have posted a live example (http://fiddle.jshell.net/eGexW/22/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 85, column 1: E028: .form-control-feedback must have a .form-group.has-feedback ancestor
• line 99, column 1: E028: .form-control-feedback must have a .form-group.has-feedback ancestor
• line 15, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.1.0
• line 19, column 7: W013: Bootstrap version might be outdated. Latest version is at least 3.3.4 ; saw what appears to be usage of Bootstrap 3.1.0

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[matkoch]

Didn't nobody notice that when focusing those inputs with feedback, the glyph disappears?! Verified in Chrome, Firefox and IE. Worth to re-open? /cc @mdo

http://jsbin.com/hucic/

[Starsam80]

@matkoch It appears to be a z-index issue. Adding z-index: 3 to .form-control-feedback fixes it

[kreba]

I'm seeing a similar issue: the form feedback is hidden when placed within the form-group but not within the input-group. Form feedback inside an invalid form-group should be visible, regardless of where it is placed.

I use server side validation, which means I can add the is-invalid class to any element I want, and it would be easy to add it to the form-group. That probably applies to most people who are doing server side validation.