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 initialize the select after the elements are loaded.

For instance, we write

document.addEventListener("DOMContentLoaded", () => {
  const elems = document.querySelectorAll("select");
  const instances = M.FormSelect.init(elems);
});

to listen to the DOMContentLoaded event with addEventListener.

The event is triggered when the DOM finishes loading.

In the event listener, we get the selects with `querySelectorAll“.

And then we initialize the selects with M.FormSelect.init.

Conclusion

To fix select not rendering with Materialize CSS, we initialize the select after the elements are loaded.

Leave a Reply

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