Bootstrap-multiselect: Options not visible when using multiselect inside bootstrapper Collapse

[qorsmond]

When I use the bootstrap-multiselect component iside a panel the options don’t show correctly, here is a plunk: http://plnkr.co/edit/d4je5XBPk5fhfIhl8xCi?p=preview

I tried playing with the z-index but cant get it to show correctly.

[samvdb]

Hi,

I came across the same issue. Applying a z-index won't fix this because the panel has overflow: hidden.
Twitter bootstrap tooltip's will have the same issue if you apply them there. However they provide the option to change your container they attach to. container: "body" will append the tooltip to the body of the document and will use absolute positioning to get it right.

I think the only solution is to implement the same functionality here.

[davidstutz]

Yes, I see the problem. Will think about this. Any ideas on this problem are welcome (as I am currently a bit busy).

[samvdb]

Well we have several issues i think.

• Append this.$ul to the body. (easy fix in buildDropdown)
• fix trigger events because when the dropdown is not in the same container as the toggle button nothing will happen
• call calculatePosition() when the dropdown is triggered (hard part)
• apply new CSS to this.$ul with new top and left position. Also the element should have absolute positioning.

[qorsmond]

Deleting this div and it works:

<div class="panel-group" id="accordion" style="z-index: -1;">

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

[samvdb]

@qorsmond ofcourse it works... You removed the parent element that add's an overflow:hidden property to the child div. This however doesnt solve the bigger issue. Try using this element inside a scrollable div or something. It will clip the dropdown. This is the problem of bootstrap-dropdown though, however other projects simply move the dropdown to the body element and use absolute positioning to counter this.

[qorsmond]

Damn yes I didn't realize that still new to the CSS world! Thanks for pointing that out!

[samvdb]

No problem :)

[davidstutz]

Seems to be solved. Reopen when I am wrong!

[samvdb]

well the problem still exists. OP just found a workaround for his situation. This workaround can not be applied for everyone though...

[samvdb]

@davidstutz could you reopen this ticket? The problem wasnt fixed, he just found a workaround.

[xcorat]

Yes please, it is not fixed.. well unless you don't use it with panels.

[avivek]

I am still facing the issue and can't apply the solution of removing the overflow:hidden.
Pls. reopen this issue.

[davidstutz]

Yes I am sorry - seems as if I was a bit overhasty.

[avivek]

Is there a solution like appending the multiselect to Body or something to fix this issue.

[william57m]

Hi,

I have the same problem, I would like use multiselect in a modal, but when I opened the multiselect at the bottom, it don't appear because of the overflow hidden of my modal-body
In this case the only solution would to append the multiselect to body.

Thanks for your support.

[sharath-krishna]

Hi,

I have a multiple accordion which is not working properly. i think there is compatibility issue with bootstrap.js and bootstrap-multiselect.js.
When i use both js files mentioned above multiselect dropdown doesnt open up and when i comment bootstrap.js and use only bootstrap-multiselect.js multiselect dropdown is visible but accordion issue pops up.

[avivek]

Hi,

Is there a chance of this being fixed any time soon?
I am using in one of my projects and since we are getting close to release and this being a major issue in my project, I need to find a solution in my project

[davidstutz]

Ok I had a closer look on this problem. These are my observations. But first

@sharath-krishna: What do you mean exactly? I am able to use both bootstrap 3.0.3 with the current version of the multiselect plugin.

In general it is not possible to use a usual dropdown within a collapse panel. So this is not directly an issue of the multiselect plugin but a general issue of using dropdowns in collape panels.

Will try modals the next few days.

[john-stephen]

Need to remove overflow:hidden or change it to overflow:visible of div. The issue get solved.

[helmus]

Please reopen this. There are numerous projects out there that handle this without issue. Take a look at bootstrap tooltip for example. We could apply the same solution here.

[rajashekharse]

Got a Solution. Checkout the below Fiddle.

https://jsfiddle.net/shekhargood/u1xfz9zh/

[IevgenBaziak]

@rajashekharse
Sorry, but statically positioning the menu carrier will work only until you scroll the page (provided the contents of the page or settings require/allow scrolling).
Once user scrolls the page - the calculated positions are not valid anymore.

[Siddhant3five8]

@sharath-krishna is right. Did you find any solution for this?
After removing the bootstrap-3.3.2.min.js, the dropdown menu starts opening, but then the checkbox adjacent to options is getting clipped.