Options box not aligned with component

[aguevaracaprio]

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

The options that are showed correspond to the Group 2 dropdown

[aguevaracaprio]

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

[sam888k12]

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; }

[aguevaracaprio]

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

sam888k12 commented 2 years ago

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?

aguevaracaprio commented 2 years ago

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

nobleclem commented 2 years ago

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.

sam888k12 commented 2 years ago

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

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[sam888k12]

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?

[aguevaracaprio]

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

[nobleclem]

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.

[sam888k12]

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