Select2 - Group - There are multiple vertical scrollbars
Hi,
https://preview.keenthemes.com/html/metronic/docs/forms/select2#group
There are 3 items in each group in the above example.
If I have more than 6 items (>= 7) in a group, a nested scrollbar will appear which cause a few difficulties for scrolling. Actually, ONLY ONE scrollbar is enought and perfect to scroll.
Could you take a look?
Thanks
Replies (5)
Below Code is Work For Me.
ul.select2-results__options[role="group"] {
max-height: none !important;
overflow-y: unset !important;
}<pre lang="scss">
.select2-container--bootstrap5 .select2-dropdown .select2-results__options[role="listbox"] {
max-height: 250px;
overflow-y: auto;
}<pre>
<style>
ul.select2-results__options {
max-height: none!important;
overflow-y: unset!important;
}
ul.select2-results__options[role="listbox"] {
max-height: 250px!important;
overflow-y: auto!important;
}
</style>Thanks... adding this to our style.bundle.css did the trick! I hate that they always want us recompiling our assets folder. No thank you.
Hi,
Good spot. We just fixed this bug and the fix will be included in the next update Metronic v8.1.9.
You can apply this quick fix by changing the code in line 321 in src/sass/vendors/plugins/_select2.scss:
// Options
.select2-results > .select2-results__options {
max-height: 250px;
overflow-y: auto;
}Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Your Support Matters!
I had same issue, tried to paste above scss code but vscode gives me error saying: } expected scss(css-rcurlyexpected)
Then just copied css code given below by Ahmet. It worked.
Thank you all!
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
