Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio button and checkbox items in dropdown menu #2097

Closed
suigintou opened this issue Feb 20, 2012 · 7 comments

Comments

Projects
None yet
8 participants
@suigintou
Copy link

commented Feb 20, 2012

Please add styles for displaying radio buttons and checkboxes in dropdown menu.

@mdo

This comment has been minimized.

Copy link
Member

commented Feb 20, 2012

There should be no reason you cannot do that right now as the styles already exist in the forms section for a block of radios or checkboxes. The only problem you'll run into is clicks closing the dropdown menu, but we dont' currently support that.

@mdo mdo closed this Feb 20, 2012

@cspeak

This comment has been minimized.

Copy link

commented Sep 28, 2012

Here is my workaround for this:

I added the class "drop-menu-form" to the dropdown-menu so that you now have :

<ul class="dropdown-menu dropdown-menu-form">
    ... stuff here ...
</ul>

Then I added the following javascript

$('.dropdown-menu').on('click', function(e){
        if($(this).hasClass('dropdown-menu-form')){
            e.stopPropagation();
        }
});
@Vangi

This comment has been minimized.

Copy link

commented Nov 30, 2012

Another solution if you add the dropdown dynamically:

$(document).on("click", ".dropdown-multiselect", function (e) {
    var parent = $(this).parent(".btn-group");
    if (!parent.hasClass("open"))
        parent.addClass("open");
});
@stefaneg

This comment has been minimized.

Copy link

commented Oct 16, 2013

In AngularJS, I worked around this by using ng-show/hide, and font awesome checkmarks to display checkboxes. Looks very nice. I'm not using a form for submit, so this won't work in that context.

    <ul class="dropdown-menu">
        <li>
            <a ng-click="filter.clearPartyFilter()" >
                <i class="icon icon-check-empty" ng-show="filter.partyFiltering"></i>
                <i class="icon icon-check-sign" ng-hide="filter.partyFiltering"></i>
                <strong>Show all parties</strong>
            </a>
        </li>
        ....
    </ul>    

@philfreo

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2014

A slight improvement to above answers...

<ul class="dropdown-menu dropdown-menu-form">
  <li><label class="checkbox"><input type="checkbox">One</label></li>
  <li><label class="checkbox"><input type="checkbox">Two</label></li>
</ul>
// Allow Bootstrap dropdown menus to have forms/checkboxes inside, 
// and when clicking on a dropdown item, the menu doesn't disappear.
$(document).on('click', '.dropdown-menu.dropdown-menu-form', function(e) {
  e.stopPropagation();
});
@roman-ku

This comment has been minimized.

Copy link

commented Aug 30, 2016

Any update on an official solution that does not require a workaround?

@CopyJosh

This comment has been minimized.

Copy link

commented May 5, 2017

I'm having a hard time getting these suggestions to work on mobile browsers fyi.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.