why is the input of a bootstrap inline form wider with validation format -


When I use verification elements in an inline form with Bootstrap 3, the width of the input is widening

The general case of my observation is that when the input element is verified 30.5 px is removed from the input width and its padding is increased by 30.2px so that the space for glyphine span can be given. But in inline form, though the padding increases, the input width does not decrease.

Here's the verification element I'm using:

  & lt; Div class = "form-group has success-feedback" & gt; & Lt; = "ExampleInputEmail2" for label class = "sr-only" & gt; Email address & lt; / Label & gt; & Lt; Input type = "email" class = "form-control" id = "exampleInputEmail2" placeholder = "enter email" & gt; & Lt; Span class = "glyphicon glyphicon-ok look-control-reaction" & gt; & Lt; / Span & gt; & Lt; / Div & gt;   

And here's a planker to clarify the comparison between two variations (you need to use full screen):

I'm not sure That this is a bootstrap bug or if i can not find any category in my html

Thank you for your help.

So it seems that this is actually the way to behave in the form inline category. I really can not understand that this class behaves like this when the form-horizontal class behaves differently, but okay! So here's the gitbahal issue I posted, the solution is here.

All you need to do is add the following CSS:

  .form-inline .has- feedback Form-Control {padding-right: 12px; }    

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -