Dropdown with a Form Inside with Twitter-Bootstrap

Dropdown with a form inside with twitter-bootstrap

Try adding the code below somewhere in your javascript. It should stop it from happening.

  $('.dropdown-menu').find('form').click(function (e) {
    e.stopPropagation();
  });

How to make a dropdown select form in Twitter Bootstrap

Bootstrap 2.3.2:

<form class="form-horizontal">
    <fieldset>          
        <div class="control-group">
            <label class="control-label">Select:</label>
            <div class="controls">
                <select>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>

Bootstrap 3.x:

<form role="form" class="form-horizontal">
    <fieldset>
      <div class="form-group">
        <label class="col-sm-2 control-label">Select:</label>
        <div class="col-sm-3">
            <select class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
      </div>
    </fieldset>
</form>

col-sm-2 and col-sm-3 define the widths for you can change accordingly. Have a look at the Grid system on the Bootstrap site to see the different variations.

Hope this helps

Bootstrap 3: Horizontal form group inside dropdown

I have edited some column widths and removed an extra " and added a class donotchange for removing the alignment error.

Here is my code

HTML

<div class="form-inline">
  <div class="form-group">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Strikes <span class="caret"></span> </button>
      <ul class="dropdown-menu" aria-labelledby="strikes">
        <li style="width: 280px;">
          <form class="form-horizontal" style="display:block;">
            <div class="form-group donotchange">
              <label for="strike-from" class="col-sm-2 control-label">From</label>
              <div class="col-xs-8">
                <input type="text" class="form-control" id="strike-from" value="">
              </div>
            </div>
            <div class="form-group donotchange">
              <label for="strike-to" class="col-sm-2 control-label">To</label>
              <div class="col-xs-8">
                <input type="text" class="form-control" id="strike-to" value="">
              </div>
            </div>
            <div class="form-group donotchange">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Apply</button>
              </div>
            </div>
          </form>
        </li>
      </ul>
    </div>
  </div>

<!-- No need. For checking Only-->
  <div class="form-group">
    <button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Sample Button </button>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="strike-to" value="">
  </div>
<!-- No need. For checking Only-->

</div>

CSS

@media (min-width: 768px){
.form-inline .donotchange {
     display: block; 
     margin-bottom: 10px; 
     vertical-align: middle; 
}
.form-horizontal .donotchange {
     margin-right: 0px; 
     margin-left: 0px; 
}}
@media (min-width: 768px){
.form-inline .donotchange {
    display: block; 
     margin-bottom: 10px; 
     vertical-align: middle; 
}}

Check my working code here http://www.bootply.com/N0lccYSCsg

Check whether it works as per your requirements.
Good day!

Dropdown button with form-control class in Boostrap 3?

I don't think these adjustments could be done without touching the css. First, a "form-control" class should apply to the button only, and afterwards it doesn't stretch due to the wrapping div.btn-group inline-block property.

so we have to add a display:block triggering class for small resolutions, which is "col-xs-12".

and for bigger screen it's necessary to manually reset this display back to inline-block in a media query.

http://jsfiddle.net/EuHm5/

@media (min-width: 768px) {

  .btn-group.col-xs-12 {
    display:inline-block;    
    width:auto;  
  }
}

Button dropdown in search form

I figured it out. All you have to do is make sure the outer div of the button dropdown group has the same display property (in my case, inline-block) and the same vertical alignment (in my case, middle) as its siblings (the text input and any other buttons).

---

Related Topics