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
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;
}
Hey Sam. I'll recommend wrapping your select in a div component
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:
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.