Categories
JavaScript Answers

How to fix select not rendering with Materialize CSS?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

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’

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?

Leave a Reply

Your email address will not be published. Required fields are marked *