search

snapappointments / bootstrap-select

:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
https://developer.snapappointments.com/bootstrap-select/
MIT License
9.85k stars 2.72k forks source link

When I put in a search modal dropdown, clicking select box closes modal? #1306

Open APbrian opened 8 years ago

APbrian commented 8 years ago

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?

<!-- search -->
<div class="row">
    <div class="col-md-12">
        <div class="input-group" id="adv-search">
            <input type="text" class="form-control" placeholder="Search all" />
            <div class="input-group-btn">
                <div class="btn-group" role="group">
                    <div class="dropdown dropdown-lg">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                        <div class="dropdown-menu dropdown-menu-right" role="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>
                    </div>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- end search -->
caseyjhol commented 8 years ago

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();
});
APbrian commented 8 years ago

Thx, but no difference. Outside the drop down, it works great, inside the drop down the options dont even pop up. example

caseyjhol commented 8 years ago

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?

APbrian commented 8 years ago

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.

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <!-- <link rel="stylesheet" href="css/bootstrap-social.css"> -->

    <!-- need for bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- required for bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- custom for all -->
    <script src="js/custom.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    <!-- Only use for search pages with categories silviomoreto.github.io/bootstrap-select -->
     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

    </head>
    <body>

    <!-- search -->
<div class="row search-area">
    <div class="col-md-12">
        <div class="input-group" id="adv-search" >
            <input type="text" class="form-control" placeholder="Search all" />
            <div class="input-group-btn">
                <div class="btn-group" role="group">
                    <div class="dropdown dropdown-lg">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ><span class="caret"></span></button>
                        <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="selectpicker" multiple >
                                        <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>

                    </div>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- end search -->

 <!-- category script -->
                                <div class="form-group">
                                    <label for="filter">Search in Category</label>
                                    <select class="selectpicker" multiple >
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                                <!-- end category script -->

            </body>
            </html>
APbrian commented 8 years ago

Still stuck.

caseyjhol commented 8 years ago

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');
    }
});
APbrian commented 8 years ago

Works great. Can't thank you enough!