Bootstrap-multiselect: Multiselect Dropdown z-index not working inside a scroll container div

[arunsasi]

In a scroll container multiselect listing not rendering propertly
My code: http://jsfiddle.net/arunsasi/7t1ask0s/

Please help to fix this issue :-(
Thanks

[iamandrewluca]

I advice to set overflow-y to visible

[arunsasi]

@thendrluca

overflow-y to visible will not work :-(

[arunsasi]

Hi,
Please respond

[Tyf0x]

I do not see what is wrong with the current behavior, it is simply following the HTML specs saying that any element in a container with an overflow property set to something other then "visible" will be clipped.
Also, if you set an overflow (x or y) to visible and the other to something different, the "visible" value will be converted to "auto" by the browser (therefore elements inside will be clipped).

You can read an interesting article on css-tricks.com here: http://css-tricks.com/popping-hidden-overflow/

In conclusion, I do not think this is a plugin issue but rather an issue with your layout.

[arunsasi]

Hi Tyf0X,
Thanks for the response,

Please check the http://jsfiddle.net/arunsasi/7t1ask0s/ and click the multiselect. Now you can view the list clipped inside the wrapper.

If you have a solution please create a jsfiddle and share it :-)

[Tyf0x]

Hi arunsasi,

I did check the jsfiddle and understand your problem. However this is not a problem in bootstrap-multiselect. It's a problem with your layout: you have a container using an overflow and the content will be cropped.

You just cannot have the browser native dropdown behavior (which ignores the overflow) working when using bootstrap-multiselect (or any other plugin), since it is using HTML elements following the rules of the overflow.

There is no other solution (that I know of, at least) than changing your layout (getting the multiselect out of the overflow), getting rid of the overflow or writing customized hacks specific to your situation (js + css).

[Tyf0x]

Or - The plugin needs to undergo a major rewrite to create it ".multiselect-container" element in the _document body_ then use position: absolute and JS to place it.

[Tyf0x]

One last thing:

From the bootstrap official doc (http://getbootstrap.com/components/#dropdowns-alignment):

May require additional positioning

Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

[davidstutz]

Yes, I agree with @Tyf0x: thanks for the thorough explanation. I will add this issue to the FAQ.

[Fclem]

This can help you fix the issue :

<div id="idHere" class="modal hide fade has_dropdown in" role="dialog" aria-hidden="false">

with

.has_dropdown .modal-body {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

then

<ul class="multiselect-container dropdown-menu">

with

ul.dropdown-menu {
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}

[klodwig-yemou]

Cool solution ( inspired from davidstutz, #455 ) for dataTables.lightColumnFilter with bootstrap-multiselect:

                $("button.multiselect").on("click", function () {
                    var opened = $(this).parent().hasClass("open"); 
                    $('.dataTables_scrollHead').css("overflow", !opened?'':'hidden'); 
                });

It could spare someone headache ;-)

[cun3]

So is there a solution for this? Any work arounds? None of the above seem to work.

[alexFilin]

I solved this problem with next custom function:

$("button.multiselect").on("click", function () {
    var opened = $(this).parent().hasClass("open");
    if (! opened) {
        $('.btn-group').addClass('open');
        $("button.multiselect").attr('aria-expanded', 'true');
    } else {
        $('.btn-group').removeClass('open');
        $("button.multiselect").attr('aria-expanded', 'false');
    }
});

But I have suspicions that it can crash css styles for multiselection.

[anhphuong]

That is the problem (in picture):
https://i.stack.imgur.com/Ibu5y.png

And the solution:
http://www.bootply.com/YvePJTDzI0
Just add this css code to div outside:

.table-responsive {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

[jhowbhz]

Work for me

.table-responsive {
overflow-x: visible !important;
overflow-y: visible !important;
}

[SopoB]

$('.multiselect-container').click(function(e)
{
var containerHeight = $(this).find("ul").outerHeight();
$(this).find(".ms-drop").css({
'position':'fixed',
'left':$(this).offset().left,
'top':$(this).offset().top,
'height':containerHeight,
})
});

[sanidhya711]

this is not working in my file even though i have nothing else on my web page but i am using ejs is this because of that
ps: the dropdown button is there but when i click on it the items are not showing up

[JohnRDOrazio]

I opened issue #1164 since after searching I hadn't found another issue dealing with this, but now I've found this thread which deals with exactly the same problem. In my opinion the cleanest solution would be that mentioned by Tyf0x in his comment above, because it's not pleasant to see a parent growing in an unnatural manner just to accomodate a popup. The popup should be above the parent, which would require a rewrite of the plugin in order to place the popup in the document body. Sure this would require some work in rewriting the plugin to work this way, I would be happy to contribute if someone could perhaps point me in the right direction: what is it in the plugin that is expecting the popup to be a child of the $container element? See my comment in the issue I opened, simply trying to append to body rather than to this.$container is not enough because something is expecting to find $popupContainer as a child of this.$container. Skimming through the plugin code I haven't quite succeeded in finding what it is, perhaps it's not just the plugin code but it's a design of bootstrap in general? Sorry I'm not super familiar with bootstrap...