Problem with CSS button placement

Asked

Viewed 448 times

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.

errocss

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.

inserir a descrição da imagem aqui

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>
html css
  • 1

    Put the code, it’s hard...

  • 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.

  • Victor puts the snippet of his code, makes it easier to understand the problem.

  • Hello! Sorry, I forgot to enter the code. Added

  • If you withdraw the <div class="input-group-btn"> should work. Or else change the div for span.

  • 1

    @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.

  • 1

    The problem is that it is inserting the text into the input-group so this occurs.

  • @Victoralencarsantos this should solve your problem http://jsfiddle.net/mapb_1990/hTPY7/7/

  • @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!

  • Have the element inspected when receiving this class and see if it is actually inserted inside the input-group

  • @Victoralencarsantos has how to post your css?

  • @Diegovieira I saw here and is not inserting

  • @Rafaeltheodoro Use only the standard Bootstrap . css, nothing customized. As it exceeds 1000 lines, you can consult here

  • @Victoralencarsantos, There are some errors with the use of grid ai, you are using col-lg-9 and col-lg-12 within it div the big problem is also in this help-block with the field error, it is inserting before the button in the group, I can see this in the second photo.

  • @Diegovieira Already occurs this way. After executing the validations, the only class that receives the has-error is the form-group pesquisa. No other class but this gets that.

  • @Victoralencarsantos, yes I saw, my mistake, I updated my comment.

  • @Diegovieira O col-lg-12 is from the field label. Already the col-lg-9 is from the field itself. Does this interfere? As for "help-block", there is some way around this problem?

  • @Victoralencarsantos Interferes in the use of the grid, the way is to take the help-block and put off the input-group.

Show 13 more comments

1 answer

1

Try adding this script:

$(document).ready(function() {
    if($('#someElement').hasClass('has-error')) {
        $(this).find('span').css("padding-top","0px");
    } 
});

Replace '#someElement' with the element that received the class "has-error".

  • Hello Ana Claudia! Thanks for the code, but the button is not padded, as you can see in the second photo. In the CSS view in the browser, the property padding is with -, which can not put any value

  • Check the line below where it has 'type="Submit"' or '<span class="glyphicon glyphicon-search">'

  • I already changed the button to Asp:Button, where there is no type property, and I don’t use span and the problem persists. I think the problem is another, right? Thank you!

  • following @Ana Claudia’s "adjustment"(gambiarra), she will test there, negative marging-top, or only top by changing the relative position or Absolute.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.