Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: Form Feedback does not work correctly if you use an Input Group

See original GitHub issue

I am trying to setup a login form that has an input group and a validation error message.

NOTE: If you understand pictures better, I have included one below to explain this.

After looking thru the documentation I see that if I wrap a < b-form-input > inside of a < b-input-group > I can accomplish the Bootstrap Input Group. I did and it works as expected.

Now I would like to make use of < b-form-feedback >. This is where my problem (which I suspect is a bug happens).

(1) The < b-form-feedback > never displays my error message if I place it just after the closing </ b-input-group >.

(2) If I place it inside the < b-input-group > it displays, but totally messes up the styling.

Please help! bootstrap-vue-error

Issue Analytics

State:
Created 6 years ago
Comments:17 (10 by maintainers)

Top GitHub Comments

2reactions

rdytogokevcommented, Oct 27, 2017

Yep,

I just tested it and it is working. screen shot 2017-10-27 at 3 32 32 pm screen shot 2017-10-27 at 3 33 30 pm

2reactions

tmorehousecommented, Oct 26, 2017

This is a well know documented bug/feature/limitation with Bootstrap V4 CSS (see several other duplicate issues).

Unfortunately it is not something we can control since it is governed by Bootstraps CSS, and how their new validation feedback works (based on sibling selectors and native browser validation)

Please give your voice/concerns over at twbs/bootstrap: https://github.com/twbs/bootstrap/issues/23454