Bootstrap 3: Dropdown form fields without <form> tag

bootstrap 3: dropdown form

There are times when we need some forms in dropdown menu, e.g. login/register/settings. The implementation is very easy in Bootstrap 3, however with form fields inclosed in <form> tag. But if for some reason we cannot use <form> wrapper (take instance of moonshine technologies .NET Web Form or JSF where entire page is wrapped in single <form>) then there is a peculiar behavior that dropdown get closed when you click on input fields.

Technically, this behavior occurs due to click event bubbling to document body, which has a click event listener to close the dropdown. We can easily fix this problem by preventing event bubbling using event.stopPropagation() method. A simple solution can be that we apply a CSS class selector named .stop-propgation along Bootstrap 3 class .dropdown-menu and then using jQuery prevent the event propagation.

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        <i class="glyphicon glyphicon-user"></i> Sign In
    </a>
    <div class="dropdown-menu form-login stop-propagation" role="menu">
        <div class="form-group">
            <label for="exampleInputEmail1">
                <i class="glyphicon glyphicon-envelope"></i> Email address
            </label> 
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">
                <i class="glyphicon glyphicon-lock"></i> Password
            </label> 
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
        </div>
        <button type="submit" class="btn btn-success btn-block"><i class="glyphicon glyphicon-ok"></i> Submit</button>
    </div>
</li>
$('.stop-propagation').on('click', function (e) {
    e.stopPropagation();
});

Bonus: You may also want to increase the width of the dropdown form :). Add another class to .dropdown-menu by the name .form-login or whatever you may like and then apply following CSS:

.form-login{
  padding: 1em;
  min-width: 280px; /* change width as per your requirement */
}

See it working:

See the Pen Bootstrap 3: Dropdown form without

tag by Mohd Ovais (@ovais) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *