2
Good morning! I am facing problems with the placement of a CSS button. When the form has not yet applied any validation, it remains in the correct position, but when validations are applied (the class is added has-error
to Ivs and a label appears below the field) it scrolls down, as in the image below.
When inspecting the elements, I see that there is a padding on the button, and I believe removing the padding-top
would solve, but there is even no way to edit it in the browser to view.
EDIT - Code below I’m wearing Bootstrap 3
<div class="form-group pesquisa">
<div class="col-lg-12">
<asp:Label
ID="lblCliente"
AssociatedControlID="txtPesquisaCliente"
ClientIDMode="Static"
Text="Cliente"
CssClass="col-lg-2 control-label"
runat="server">
</asp:Label>
</div>
<div class="col-lg-9">
<div class="input-group">
<asp:TextBox
ID="txtPesquisaCliente"
ClientIDMode="Static"
CssClass="form-control required"
runat="server">
</asp:TextBox>
<div class="input-group-btn">
<button id="btnPesquisarCliente" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
</div>
Put the code, it’s hard...
– CesarMiguel
Please explain the problem further, and if possible include a example of code that reproduces what is happening, because your question is too wide. See Help Center How to Ask.
– Jorge B.
Victor puts the snippet of his code, makes it easier to understand the problem.
– RafaelTheodoro
Hello! Sorry, I forgot to enter the code. Added
– Victor Alencar Santos
If you withdraw the
<div class="input-group-btn">
should work. Or else change thediv
forspan
.– Jorge B.
@Jorgeb. Both proposed solutions did not solve. Removing the class, the button switches to the bottom line, and changing the div to span the problem remains the same.
– Victor Alencar Santos
The problem is that it is inserting the text into the
input-group
so this occurs.– Diego Vieira
@Victoralencarsantos this should solve your problem http://jsfiddle.net/mapb_1990/hTPY7/7/
– Diego Vieira
@Diegovieira Below is the Javascript line that adds the class to HTML
$(element.form).find('div[class$="pesquisa"]').addClass('has-error');
Still insert into input-group? Thank you!– Victor Alencar Santos
Have the element inspected when receiving this class and see if it is actually inserted inside the
input-group
– Diego Vieira
@Victoralencarsantos has how to post your css?
– RafaelTheodoro
@Diegovieira I saw here and is not inserting
– Victor Alencar Santos
@Rafaeltheodoro Use only the standard Bootstrap . css, nothing customized. As it exceeds 1000 lines, you can consult here
– Victor Alencar Santos
@Victoralencarsantos, There are some errors with the use of grid ai, you are using
col-lg-9
andcol-lg-12
within itdiv
the big problem is also in thishelp-block
with the field error, it is inserting before the button in the group, I can see this in the second photo.– Diego Vieira
@Diegovieira Already occurs this way. After executing the validations, the only class that receives the
has-error
is theform-group pesquisa
. No other class but this gets that.– Victor Alencar Santos
@Victoralencarsantos, yes I saw, my mistake, I updated my comment.
– Diego Vieira
@Diegovieira O
col-lg-12
is from the field label. Already thecol-lg-9
is from the field itself. Does this interfere? As for "help-block", there is some way around this problem?– Victor Alencar Santos
@Victoralencarsantos Interferes in the use of the grid, the way is to take the
help-block
and put off theinput-group
.– Diego Vieira