Drop down menu collapsing in css

Question

I was using the code snippet from

http://bootsnipp.com/snippets/featured/advanced-dropdown-search

I made the following changes to the code

 <div class="col-md-12">
            <form action="./" method="POST" autocomplete="on">
                <div class="input-group" id="adv-search">
                    <input type="text" class="form-control"
                        placeholder="Search for snippets" id="mainForm" name="searchBox" />
                    <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>
                                <span class="dropdown-menu dropdown-menu-right" role="menu">
                                    <div class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label for="filter">Filter by</label> <select
                                                class="form-control" name="docType">
                                                <option value="0" selected>All Sources</option>
                                                <option value="1">Option 1</option>
                                                <option value="2">Option 2</option>

                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Author / Modifier</label> <input
                                                class="form-control" type="text" name="authorName" />
                                        </div>
                                        <div class="form-group">
                                            <label for="contain">Contains the words</label> <input
                                                class="form-control" type="text" name="words" />
                                        </div>
                                        <!-- <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> -->
                                    </div>
                                </span>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

After shifting the form tag above, the drop down menu is collapsing by just clicking anywhere on the dropdown.

Can someone please explain why?

I tried doing a lot of changes but nothing worked for me.

https://jsfiddle.net/tj2y5ptp/

can you please give more information because i am not getting it. — Sagar Kodte, Apr 15 '16 at 07:20
you saw the bootsnip example? In that if you click the dropdown button next to search bar it drops down and you can enter the fields in advanced search. In my code it drops down fine but if you click on the internal dropdown that is select tag or anywhere in that div that has dropped down, the advanced search closes back — Amriteya, Apr 15 '16 at 07:23
Please replace SPAN element (dropdown-menu class) to DIV, try again and let us know. — Diomedes Andreou, Apr 15 '16 at 07:31
It won't work. I was using Div only till now. Now Only I changed to span to check for something new — Amriteya, Apr 15 '16 at 07:35
The display has a little problem but the problem persists. The drop down is collapsing by clicking on the collapsed area — Amriteya, Apr 15 '16 at 08:29
Possible duplicate of [Twitter Bootstrap - Avoid dropdown menu close on click inside](http://stackoverflow.com/questions/25089297/twitter-bootstrap-avoid-dropdown-menu-close-on-click-inside) — Ismail Farooq, Apr 15 '16 at 09:50

score 4 · Accepted Answer · answered Apr 15 '16 at 08:51

Try removing data-toggle="dropdown" and using jquery .toggleClass('open'); and .removeClass('open'); to open/close the dropdown menu, (then dropdown nenu will close just by clicking outside it (on Body) :

Open Dropdown:

$('.dropdown-lg .btn').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

Close Dropdown (when click on body):

$('body').on('click', function (e) {
    if (!$('.dropdown-lg').is(e.target) 
        && $('.dropdown-lg').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('.dropdown-lg').removeClass('open');
    }
});

See Updated fiddle, I hope it helps you, Thanks.

Drop down menu collapsing in css

1 Answers1