Sometimes, we want to fix select not rendering with Materialize CSS.
In this article, we’ll look at how to fix select not rendering with Materialize CSS.
How to fix select not rendering with Materialize CSS?
To fix select not rendering with Materialize CSS, we wait for the DOM to be loaded completely before we apply the styles for the select drop downs.
For instance, we write
document.addEventListener("DOMContentLoaded", () => {
const elems = document.querySelectorAll("select");
const instances = M.FormSelect.init(elems);
});
to listen for the DOMContentLoaded event to see when the DOM finishes loading.
The callback runs when the DOM finishes loading.
In it, we select all the select elements with querySelectorAll.
And then we call M.FormSelect.init on the elems node list which has the select elements.
Conclusion
To fix select not rendering with Materialize CSS, we wait for the DOM to be loaded completely before we apply the styles for the select drop downs.
3 replies on “How to fix select not rendering with Materialize CSS?”
In main.ts I declared:
declare const M: any;
M.AutoInit();
And static select works perfectly.
But in the svelte file, where I use select with dynamic rendering, It says
cannot find name ‘M’
Did you try this https://stackoverflow.com/a/59800150?
Applied the first three steps. (I don’t want to use bootsrtap)
I tried inserting into main.ts, but was not success.
const app = new App({
target: document.body,
});
declare const M: any;
M.AutoInit();
document.addEventListener(“DOMContentLoaded”, () => {
const elems = document.querySelectorAll(“select”);
const instances = M.FormSelect.init(elems);
});
export default app;
Where to use this code snippet in Svelte/typescript combo?