Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    40
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Bootstrap Modal issue

    Hi all,

    Sorry wasnt sure if i should post this under HTML/CSS or JavaScript - it comes under the JS of Bootstrap so thought i would post it here.

    OK so i am working on a website: Insight Gaming League

    You will see at the top of the page the Sign In, Register and Premium buttons. The second set is testing.

    You will notice the top right buttons dont work and the ones that wrap do.

    The difference is that one set is wrapped in a form and the other isnt.

    How do i make it so that they stay in the correct position in the form for the login section and work with the modal?

    The code:
    Code:
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Insight Gaming League</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#contact">Premium</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Games <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-submenu">
                                <a tabindex="-1" href="#">Call Of Duty</a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-header">IGL Pro League</li>
                                    <li><a tabindex="-1" href="#">Division 1</a></li>
                                    <!-- <li class="dropdown-submenu">
                                        <a href="#">More..</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">3rd level</a></li>
                                            <li><a href="#">3rd level</a></li>
                                        </ul>
                                    </li> -->
                                    <li><a href="#">Division 2</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">IGL Amateur League</li>
                                    <li><a href="#">Division 1</a></li>
                                    <li><a href="#">Division 2</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">IGL Open League</li>
                                    <li><a href="#">Division 1</a></li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu">
                                <a tabindex="-1" href="#">Counter Strike</a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-header">IGL Pro League</li>
                                    <li><a tabindex="-1" href="#">Division 1</a></li>
                                    <li><a href="#">Division 2</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">IGL Amateur League</li>
                                    <li><a href="#">Division 1</a></li>
                                    <li><a href="#">Division 2</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">IGL Open League</li>
                                    <li><a href="#">Division 1</a></li>
                                </ul>
                            </li>
                            <li><a href="#">DOTA 2</a></li>
                            <li><a href="#">League Of Legends</a></li>
                            <li><a href="#">Starcraft 2</a></li>
                        </ul>
                    </li>
                </ul>
    		<form class="navbar-form navbar-right" role="form">
            	<div class="form-group">
                	<input type="text" placeholder="Email" class="form-control input-sm">
                </div>
                <div class="form-group">
                	<input type="password" placeholder="Password" class="form-control input-sm">
               </div>
            <button type="submit" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">Sign in</button>
            <button type="register" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Register</button>
            <button type="premium" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Premium</button>
                <!--<button type="submit" class="btn btn-success btn-sm">Sign in</button>
                <button type="register" class="btn btn-danger btn-sm"  data-toggle="modal" data-target="#myModal">Register</button>
                <button type="premium" class="btn btn-primary btn-sm">Premium</button>-->
            </form>
            <button type="submit" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal">Sign in</button>
            <button type="register" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Register</button>
            <button type="premium" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Premium</button>
            <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">test</button>-->
    
            </div><!--/.nav-collapse -->
          </div>
        </div>
        
        <div class="starter-template">
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    Make IT Work Computers
    www.mitwc.com.au

  • #2
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What is the purpose of the buttons? To submit the email address and password? If that is the case, there is no purpose for the modal. You are asking the buttons to do two separate functions, 1. submit the form and 2. open modal. The button can not handle two requests. If the buttons are to open the modal there should be no form. The form itself should be inside the modal.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,565 Times in 4,529 Posts
    Also, your HTML is invalid (even though it works).

    A <form> should be treated the same as any other tag: It should have the matching
    </form> at the same "level".

    So in your case you should have
    Code:
                </ul>
                <form class="navbar-form navbar-right" role="form">
                    <div class="form-group">
                        <input type="text" placeholder="Email" class="form-control input-sm">
                    </div>
                </form>
                <div class="form-group">
    Which clearly then messes up the buttons that should be part of the <form>.

    Unless you have multiple <form> tags on a single page, I would do
    Code:
    <body>
        <form ...>
        ... content ...
        </form>
    </body>
    One form per page, covering the entire page.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,448
    Thanks
    11
    Thanked 598 Times in 578 Posts
    you can also use the form attribute on form elements (ex <input form=myFormID name=email>) to include an input/select/etc with a form's data from outside the <form> tag.
    and you can use <label> tags to make one button click another button or focus an <input> by ID.
    Last edited by rnd me; 07-14-2014 at 11:43 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,877
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    What is a form without action attribute?

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    40
    Thanks
    1
    Thanked 3 Times in 3 Posts
    so i took this from an example page that was on the bootstrap GIT HUB called theme. and the buttons were inside the form to keep them aligned to the right of the input fields, i do not want to use the login button to take the input and submit as well as open a modal. I was just testing. I want the register and premium buttons to open a modal as a form to register/subscribe.

    at the moment im focusing on template and not database build/logic.
    Make IT Work Computers
    www.mitwc.com.au

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,565 Times in 4,529 Posts
    Quote Originally Posted by VIPStephan View Post
    What is a form without action attribute?
    The default value of the action attribute is the URL of the current page.

    So a <form> with no action simply posts the form back to the same page.

    This is a common way of processing forms in ASP and ASP.NET and I have even used it with ordinary HTML pages.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •