locked
Positioning Send/Submit buttons with same CSS btn-default RRS feed

  • Question

  • User-1793215261 posted

    Hello

    On my Web pages, the position of each of my 'Send' buttons differs depending upon the context around it. How would I position each button on its respective Web page as they all take the same CssClass: btn btn-default. For example, the 'forgot' button:

    <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <asp:Button runat="server" OnClick="Forgot" Text="Email Link" CssClass="btn btn-default" />
                            </div>
                        </div>

    and the Log-in button:

     <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <asp:Button runat="server" OnClick="LogIn" Text="Log in" CssClass="btn btn-default" />
                            </div>
                        </div>

    That CssClass is taken from bootstrap.css in Microsoft's WebFormsIdentity template which I am attempting to customise.

    Thanks!

    Monday, May 13, 2019 9:30 AM

All replies

  • User475983607 posted

    Hello

    On my Web pages, the position of each of my 'Send' buttons differs depending upon the context around it. How would I position each button on its respective Web page as they all take the same CssClass: btn btn-default. For example, the 'forgot' button:

    <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <asp:Button runat="server" OnClick="Forgot" Text="Email Link" CssClass="btn btn-default" />
                            </div>
                        </div>

    and the Log-in button:

     <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <asp:Button runat="server" OnClick="LogIn" Text="Log in" CssClass="btn btn-default" />
                            </div>
                        </div>

    That CssClass is taken from bootstrap.css in Microsoft's WebFormsIdentity template which I am attempting to customise.

    You have not explained the problem you are trying to solve or provided enough code to reproduce the issue.  

    Element positions and CSS in general are relative to the surrounding CSS formats.  This is fundamentally how CSS works.  Use the browser's Dev Tools (F12) to troubleshoot the UI by viewing the CSS applied.

    The btn btn-default does not affect the button position.  The CSS class affects how the button looks. 

    Monday, May 13, 2019 11:25 AM
  • User-1793215261 posted

    Sorry for not being more specific. I have a few forms each with a button under the final form field. The input fields which the user types in to are vertically right-aligned and neatly arranged, but the buttons at the bottom of the form - and only the buttons - stick out even further to the right, meaning they almost touch the side of the right screen. I am inclined to think they would look better if they were vertically aligned with the input fields above them.

    I am assuming, then, that the button position is determined either by 'form-group' or 'col-md-offset-2 col-md-10'.

    Thanks again. 

    Monday, May 13, 2019 2:48 PM
  • User753101303 posted

    Hi,

    My guess is that the markup for your bootstrap grid is not correct (in particular elements not being nested correctly but it's really just a guess).

    My personal preference is to test the minimal amount of code on a separate page to see how it works :
    - it's easier because to try/test/understand because it doesn't come with lot of unrelated stuff and you can tweak at will without messing your actual page (and you may find the issue yourself once you are not encumbered with unrelated stuff)
    - if still can't get it you have something simple to show to others (having to ignore ton of stuff unrelated to an issue is discouraging for those trying to help)

    You can use a site such as https://jsfiddle.net/boilerplate/bootstrap  to publish the smallest bootstrap grid markup showing your actual issue

    Monday, May 13, 2019 3:04 PM
  • User475983607 posted

    Sorry for not being more specific. I have a few forms each with a button under the final form field. The input fields which the user types in to are vertically right-aligned and neatly arranged, but the buttons at the bottom of the form - and only the buttons - stick out even further to the right, meaning they almost touch the side of the right screen. I am inclined to think they would look better if they were vertically aligned with the input fields above them.

    I am assuming, then, that the button position is determined either by 'form-group' or 'col-md-offset-2 col-md-10'.

    Again, there is not enough markup to to provide an accurate solution.   I can only assume the inputs have different CSS applied.

    I am assuming, then, that the button position is determined either by 'form-group' or 'col-md-offset-2 col-md-10'.

    I don't think you understand the Bootstrap grid system and recommend going to the Bootstrap site and learn how to use the grid system.  The CSS shown affects the grid system columns positions not the button. 

    https://getbootstrap.com/docs/3.4/css/

    https://getbootstrap.com/docs/4.0/components/forms/

    I assume the inputs have similar but different CSS applied.  Perhaps at the input element level rather than the row.  Using Dev Tools (F12) should clearly show you what CSS is applied to each element.

    Monday, May 13, 2019 3:08 PM
  • User-2054057000 posted

    Suppose you want to apply btn btn-default css class on all buttons then you will have to  add them like this:

    <asp:Button runat="server" OnClick="Forgot" Text="Email Link" CssClass="btn btn-default" />

    Now in case if you want all buttons to automatically get the btn btn-default css class then you can do this thing with jQuery like this:

    <asp:Button runat="server" OnClick="Forgot" Text="Email Link" />
    
    <asp:Button runat="server" OnClick="Login" Text="Email Link" />
    
    <asp:Button runat="server" OnClick="Logout" Text="Email Link" />
    
    $("input[type='submit']").addClass("btn btn-default");
    

    Reference - jQuery addClass() Method

    Wednesday, May 15, 2019 11:57 AM