Bootstrap-select: Can I apply custom style on dropdown-menu?

Created on 18 Feb 2016 · 4Comments · Source: snapappointments/bootstrap-select

I have a custom bootstrap theme and I'd like to modify the .dropdown-menu to still be black on white background.

data-style attribute seems to only impact the button itself.

Source

didip

Most helpful comment

Well we can always use JavaScript to access the .dropdown-menu and add our custom class.

jQuery('.selectpicker')
    .selectpicker({
    size: false
  })
  .siblings('.dropdown-menu')
  .addClass('panel__ddown'); //replace panel__ddown with your custom class

One thing to note is that, bootstrap-select adds .open to the inner container. Normally Bootstrap doesn't have this behaviour.

technbuzz on 7 Jan 2017

❤1 🎉1

All 4 comments

Afaik, .dropdown-menu is a standard Bootstrap dropdown menu with some additional styling overlayed by Bootstap Select. So restyle it in your CSS. Keep in mind that Bootstrap Select uses .dropdown-menu for both the menu and an inner menu wrapper. Styling against .dropdown-menu.open and .dropdown-menu.inner seperately may be necessary.

ouroborus on 28 Feb 2016

I am having a similar issue. I need to apply custom styling to the dropdown menu, but I am needing to use data-container='body' because of container size / z-index issue. So, being that the menu is only just inside body, that means I can't just use a css selector that specifies just that particular dropdown menu element.

I am thinking maybe allowing the user to specify a class to add to the dropdown menu would resolve this issue. This way I can just apply my styling to that class selector.

Example:

They'd specify a data attribute, such as data-dropdown-class='custom-added-class-name'

Then the HTML in the DOM would be:

<body>
<div class="bs-container btn-group bootstrap-select open custom-added-class-name"
     style="top: 58px; left: 240px; width: 130px;">
    <div class="dropdown-menu open" style="max-height: 532px; overflow: hidden;">
        <ul class="dropdown-menu inner" role="menu" style="max-height: 520px; overflow-y: auto;">
            <li data-original-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Some Text</span><span
                class="glyphicon glyphicon-ok check-mark"></span></a></li>
            <li data-original-index="1" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span
                class="text">Some Text</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
        </ul>
    </div>
</div>
</body>

hilyin on 31 Aug 2016

👍1

Well we can always use JavaScript to access the .dropdown-menu and add our custom class.

jQuery('.selectpicker')
    .selectpicker({
    size: false
  })
  .siblings('.dropdown-menu')
  .addClass('panel__ddown'); //replace panel__ddown with your custom class

One thing to note is that, bootstrap-select adds .open to the inner container. Normally Bootstrap doesn't have this behaviour.

technbuzz on 7 Jan 2017

❤1 🎉1

Thank you @technbuzz. I ended up using the template object field when initing the selectpicker with a custom class. Worked great. Thank you for taking your time to reply.

hilyin on 7 Jan 2017

Was this page helpful?

0 / 5 - 0 ratings