CODEWITHSUNDEEP
twitter-bootstrap
HEYHEY
HEYHEY

Reputation: 533

Bootstrap dropdown menu stay open to type

So, I have a bootstrap dropdown menu as following:

<div class="dropdown">
    <button type="button" data-toggle="dropdown" id="more" class="button_icon">More</button>
<ul class="dropdown-menu role="menu" aria-labelledby="more">
    <li>
        <input class="btn-block"/>
    </li>
</ul>
</div>

The dropdown function works fine, however whenever I try to type something on the input field, the menu closes.

Is there a way to force it open while it is within the dropdown menu (such as the input field)?

Thanks!

Upvotes: 1

Views: 278

Answers (1)

Shehary
Shehary

Reputation: 9992

You need to prevent dropdown event when clicked on input text box. You can achieve this by using jQuery. stopPropagation

Working Fiddle

in input add class dropdown-input

<input type="text" class="btn-block dropdown-input"/>

and add this script to prevent the event from closing the dropdown when type/click on text box

$('.dropdown-input').click(function(e) {
    e.stopPropagation();
});

Upvotes: 2

Related Questions