Validation format bug with bootstrap form-inline
Closed this issue · 11 comments
Another small bug with the format. Here's a plunker : http://plnkr.co/edit/81EhrtkbBKLwOktNutqx?p=preview
You will need to view this in full screen since it's an inline form. When the format is valid the input's width is increased, and when it's invalid the X is placed on the bottom right.
I will take a look at bootstrap3ElementModifier.js in the src to find out what is happening.
Yes the span element with the error message is too large and pushing everything out of line. If you remove the error message span the element looks fine with just the cross or tick icon. I suppose the bootstrap3ElementModifier should take into account inline forms and put a max-width on the span and overflow or ellipsis or something?
Not sure that the error message is the only one responsible. I made another plunker without your module : http://plnkr.co/edit/MaNscQLTGBIOLTL3n5xy?p=preview
From what I understand by looking at the properties the normal case is that when the input element is verified 30.5px are removed from the input width and its padding is increased by 30.5px to give space for the glyphicon span.
But in the inline form although the padding is increased, the width of the input is not decreased.
Yes your right - adding the feedback icon increases the width of the element. So is this a bootstrap bug?
Could be but this is beyond my knowledge :)
I have posted a question on SO.
http://stackoverflow.com/questions/24952694/why-is-the-input-of-a-bootstrap-inline-form-wider-with-validation-format
Any update on this? By the looks of this it is expected bootstrap behaviour??
No real answer so far but I don't think this should be expected behaviour. I'll open an issue on boostraps' githup page.
In any case a workaround could be to force the 30.5px reduction in your code. Is it feasible?
twbs/bootstrap#14262
Hope they get the issue in spite of the automatic validation filter.
@flaurian You might need to add the 'data-' attribute to the angular attribute to get the bootstrap bug to pass validation i.e. data-ng-app="myApp", data-ng-controller="aController" etc.
Nice. That did the trick!
There's an answer to this issue from the bootstrap team. It's a bug related to the browser. A workaround is to add some css. What I noticed is that with a form-inline, on error state it can happen that the glyphincon-remove is outside of the input if the error text is wider than the input.
So i my case I just gave up on the form-inline and worked with form-horizontal in a row.
Cool - I'll close this then but I'll add some info in the bootstrap ui modifier class pointing to the css fix
.form-inline .has-feedback .form-control {
padding-right: 12px;
}