how to prevent bootstrap dropdowns from toggling back if it has form elements

Question

http://plnkr.co/edit/rO1cev9Pw7TNbeGLioVk?p=preview

How should I prevent the dropdown from closing If I want to have multiple checkboxes and check or uncheck more than one at a time?

see this answer http://stackoverflow.com/questions/10863821/bootstrap-dropdown-closing-when-clicked — Abdul Malik, Oct 29 '13 at 10:59

score 17 · Accepted Answer · answered Oct 29 '13 at 10:56

17

Since the dropdownToggle observes click events to close the dropdown menu, you will need to stop propagation of click events on checkbox elements. This can be easily done like so:

<input type="checkbox" ng-click="$event.stopPropagation()">

And the working plunk: http://plnkr.co/edit/AcbhOkKr2rGrPeoge26H?p=preview

answered Oct 29 '13 at 10:56

pkozlowski.opensource

117,202
60
326
286

It would be cool if angular-ui bootstrap had multiselect dropdown menus – Oct 29 '13 at 11:49

score 0 · Answer 2 · answered Oct 29 '13 at 11:17

0

I had a similiar issue with bootstraps dropdown and I wanted a native ( angular only ) implementation of a multi- dropdown select ( Basically I wanted to replace chosen since it depends on jquery ) . So I wrote one myself .

Here is the plunker demonstrating the dropdown :

http://plnkr.co/edit/lxewJUN8li9YQj9h1cIz?p=preview

It has support for Select All as well if you are in need of something like that.

Hope this helps.

NOTE : For some reason it only works with the unstable branch.

answered Oct 29 '13 at 11:17

ganaraj

26,841
6
63
59

cool! why is there a scrollbar in the dropdown list, can we remove it? – Oct 29 '13 at 11:42
1

Thats just a css change. I have removed it now. – ganaraj Oct 29 '13 at 12:00

how to prevent bootstrap dropdowns from toggling back if it has form elements

2 Answers2