nobleclem/jQuery-MultiSelect

Options box not aligned with component

aguevaracaprio opened this issue · 7 comments

When using the multiselect under a regular div, the options component is not aligned with the dropdown
I've seen the demo code and it is not happening there, so not sure if my html is wrong or I'm missing something

<div id="wrapper" style='display: flex; align-items:stretch'>
</div>

That's the wrapper div

Screenshot from 2021-11-30 17-03-47
The options that are showed correspond to the Group 2 dropdown

EDIT 1: I was able to solve the issue by removing position: absolute in the rule .ms-options-wrap > .ms-options

EDIT 2: Fix above didn't work as expected when having components below the dropdown. I added back the absolute position but removed left: 0 and seems to work

Hi,

I am having the same issue but the fixes above did not work. I removed first left: 0 then position: absolute

This is what I have now.
.ms-options-wrap > .ms-options {
width: 100%;
margin-top: 1px;
margin-bottom: 20px;
background: white;
z-index: 2000;
border: 1px solid #aaa;
overflow: auto;
visibility: hidden;
}
MultiSelectScreenshot

Hey Sam. I'll recommend wrapping your select in a div component

And remove the left: 0. That was the html structure that I followed for it to work

Thanks but I tried that and still getting the same issue. I think I am having trouble getting the stylesheet to talk to my select statement. This the div code I wrapped around it:

. Should I be using something else?

I can't see your code, but select tags can't be customized that much. That's why the author created a button tag instead to add all this functionality. I would recommend opening the "Inspect" mode of your browser and inspect the option box and play around with the css properties that are there. Start by adding back all the original code and then start playing around by removing and adding new attributes

The updated jquery.multiselect.css file should resolve this. Not sure why I didn't have that particular bit of css in there all along.

Thank you this issue has been resolved on my end with the updated css.