I've setup this stackblitz
You can see in the styles.css file that I set the width of the option dropdown div to a fixed width of 650px, which works in that case
@import '~bootstrap/dist/css/bootstrap.min.css';
.my_choices_inner {
display: inline-block;
vertical-align: top;
width: 100%;
padding: 0;
margin-top: -2px;
min-height: 44px;
overflow: hidden;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
word-break: break-word;
width: 650px;
}
.choices {
margin-bottom: 0;
}
But I would really like to have the width adjust automatically to the length of the options currently present in the dropdown div.
When I set the width to "100%", it will not overflow the container. I've also tried "fit-content" and "auto" to no avail.
What would I need to do to achieve this?
EDIT: To be precise: The text should not wrap, it should be in one line
CodePudding user response:
I have revised the code, please check below link:
https://stackblitz.com/edit/js-vb71zr?file=style.css,index.js,package.json
Here, I have modified the CSS code to make the select div dynamic.
Also, I have added 1 more dummy value option for testing. Refresh the page and test it. Please let the above example link and let me know if you find any issues.
EDIT: This is the essential part:
.choices__list--dropdown,
.choices__list[aria-expanded] {
word-break: break-word;
width: max-content;
}