Select 2: styles not completely there
Hey all,
working on a Symfony + Metronic app, I cannot seem to get all the select2 styles to load. The background is transparent and the other elements appear on top of the select box.
I used a custom webpack configuration, but all the styles are bundled in (I can see the select2 classes in the included bundle). Has anyone dealt with this before ?
This is the webpack config:
.addEntry("metronic-scripts", glob.sync("./assets/metronics/src/js/components/*.js").map((e) => `./${e}`))
.addStyleEntry("metronic-plugin-styles", "./assets/metronics/src/sass/plugins.scss")
.addStyleEntry("metronic-styles", "./assets/metronics/src/sass/style.scss")
Replies (5)
@hill climb racing
I'm currently using custom webpack but I can't load select2 styles either.
matteo gassend, have you resolved this issue yet?
Hi Matteo,
Apologies for the delay, and thank you for your response.
Have you had a chance to rebuild the assets using Symfony Webpack? It seems like you've imported the required styles (`plugins.scss` and `styles.scss`) in the correct order, which is correct.
To further troubleshoot the issue, could you please verify whether the Select2 plugin is correctly imported in the `plugins.scss` file?
@import '~select2/dist/css/select2.min.css';
This ensures that the Select2 styles are included in your project.
Feel free to share more details or code snippets if the issue persists, and we'll continue to assist you in resolving this styling concern.
Thank you for your patience.
Hi,
Please try to include this js file also, after importing select2 plugin js.
/js/vendors/plugins/select2.init.js
Thanks
Hi,
it was already imported, but the background was still transparent ;(
I managed to fix some of the issues with the background by applying
background-color: var(--#{$prefix}dropdown-bg);to the selector .select2-results > .select2-results__options, but is there a better option?
