Clever Geek Handbook

Show bootstrap-select inside boot window

I am using Bootstrap button dropdown to show a form. I disabled dropdown, disappearing onclick (while the user is manipulating the form) by calling stopPropagation

. One of the form elements is a drop-down list. If I use my own html select element everything is fine (except it looks ugly). If I replace it with bootstrap-select (which simulates a selection by div), I cannot select the value (since there is not enough space in the button dropdown). I tried to apply a workaround to point container: 'body'

to bootstrap-select. This helps to see the dropdownlist values, but the button dropdown closes when I select the item (I assume this happens when boostrap-select belongs to the body that is above the button dropdown to which click propagation is applied).

            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
                    Take <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <form>    
                            <select id="mySelect" class="selectPicker">
                              <option>1</option>
                            </select>
                        </form>
                    </li>
                </ul>
            </div>

<script type="text/javascript">
  $('.dropdown-menu').click(function(e) {
                e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
            });

  $('.selectpicker').selectpicker({container: 'body'});
</script>
+3


source to share


2 answers


The button dropdown closes when you select any of the options, because essentially it jumps over your stopPropagation since the selection container is set to body. You need to add some javascript to check if the element event.target

(the element that dispatched the event in the first place) was one of the bootstrap selection elements. If event.target is one of the "bootstrap-select" selectors you need stopPropagation

. You will notice that this will also prevent bootstrap-select from closing, so you can just do it manually by removing the public class from the element with the class bootstrap-select

.

DEMO

Jquery:



$('.dropdown-menu').on('click', function(event) {
    event.stopPropagation();
});

$('.selectpicker').selectpicker({
    container: 'body'
});

$('body').on('click', function(event) {
    var target = $(event.target);
    if (target.parents('.bootstrap-select').length) {
        event.stopPropagation();
        $('.bootstrap-select.open').removeClass('open');
    }
});

HTML:

<div class="btn-group">
    <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown">
        Take <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <form>    
                <select class="selectpicker">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                    </select>
            </form>
        </li>
    </ul>
</div>
+5


source


I modified your function a bit and tested it in Chrome and FF.

$("ul.dropdown-menu").on("click", "form", function(e) {
    e.stopPropagation(); });


Working example

0


source






More articles:


All Articles