-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When I put in a search modal dropdown, clicking select box closes modal? #1306
Comments
By default, Bootstrap closes the menu when you click inside of it. You need to do something like: <div class="dropdown-menu dropdown-menu-right" role="menu" id="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Sort by</label>
<select class="form-control">
<option value="0" selected>Username</option>
<option value="1">Date Uploaded</option>
</select>
</div>
<div class="form-group">
<label for="filter">Order:</label>
<select class="form-control">
<option value="0" selected>Ascending</option>
<option value="1">Descending</option>
</select>
</div>
<!-- category script -->
<div class="form-group">
<label for="filter">Search in Category</label>
<select class="form-control selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<!-- end category script -->
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div> $('#menu').on('click', function(e) {
e.stopPropagation();
}); |
That's a different issue than what you described in the first post. Are you using data-container? Is this a z-index issue? Have you been able to reproduce this using a reduced test case? |
Sorry, I didn't realize it was a different issue. I'm not using a data container, and I didn't think it was a z-index issue since I couldnt get the menu to show at all (though I am not a good CSS guy). I tried to put it live on jsfiddle, but I couldnt get it to run. Below is my full, reduced page. The stand alone menu at the bottom works, but the one in the drop down does not. I have no zindex entry, but I am using the js code you supplied.
|
Still stuck. |
Try this: $('body').on('click', function(e) {
var target = $(event.target),
$parent = target.parents('.bootstrap-select');
if ($parent.length) {
e.stopPropagation();
$parent.toggleClass('open');
} else {
$('.bootstrap-select').removeClass('open');
}
}); |
Works great. Can't thank you enough! |
I am trying to do an advanced search with extra options using bootstrap select. If I do not put it in a drop down, it works fine. In the drop down, they show up ok, but when you click the field to select an option, the drop down closes.
Any ideas how to use this in the drop down?
The text was updated successfully, but these errors were encountered: