Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • May 20 01:52
    dhavalveera closed #6661
  • May 16 22:15
    gilbertoayala12 closed #6482
  • May 16 17:47
    kuza2010 closed #6667
  • May 16 17:47
    kuza2010 commented #6667
  • May 16 11:40
    LoganTann commented #6667
  • May 16 11:35
    LoganTann commented #6662
  • May 16 11:34
    LoganTann commented #6661
  • May 01 17:14

    acburst on gh-pages

    Patreon may (compare)

  • Apr 27 01:44
    ValmorMoreira commented on 824e782
  • Apr 20 10:51
    nomuna commented #6638
  • Apr 19 20:59
    jshster commented #4070
  • Apr 19 16:57
    jemedina112 commented #4070
  • Apr 17 18:37
    Baraw commented #3397
  • Apr 16 22:42
    jshster commented #6638
  • Apr 16 21:41
    nomuna commented #6638
  • Apr 15 18:53
    nomuna commented #6638
  • Apr 12 10:13
    jshster commented #6633
  • Apr 12 08:35
    JohnSundarraj commented #6633
  • Apr 07 04:37
    Posandu commented #6615
  • Apr 07 04:33
    Posandu commented #6441
I want to use materialize icons in developing a google workspace add-on. The JSON for the add-on requires a URL for the icon. From Google Quickstart:

The above message was cut off:
From Google Add-on Quickstart JSON:
"logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/pets_black_48dp.png"
How do I derive the icon URL from the materialize icons described here:

Thanks for your help,
Mumbling Fumbler

OK, I think I figured it out, but it would be great if the mapping were documented somewhere.
Is there a class for <table> elements to make the rows more compact? I thought there was a while back but I'm re-reading the documentation and can't find it anymore.
hi there!
i'm adding html sel;ect tag in my project but for some reason Materialize's select adding another "select-wrapper class inside my select . can anyone tell me what am i doing wrong here?
i'm new to Materialize theme.
<div class="row">
                    <div class="input-field col s12 m6">
                        <select asp-for="CityId" asp-items="@ViewBag.CitiesSelectList">
                            <option value="" disabled selected>Select City...</option>
                        <span asp-validation-for="CityId" class="text-danger"></span>
this is my code
Hello people,
this is Bharath. amateur in coding
i just came across cdn thing there i have seen 2 links. one for css and other for js. so i just want to know the difference between those 2
Karthick Sundar Subramanian

Hi there! I was using materialize autocomplete form until 2 days ago and it suddenly stopped working

<div class="input-field col s6">
                  <i class="material-icons prefix">find_in_page</i>
                  <input type="text" id="projSel" class="autocomplete" required>
                  <label for="projSel">Select Project</label>

this is my autocomplete element


  function pickProj(options)
   var projPicker = document.getElementById('projSel');  
   var instances = M.Autocomplete.init(projPicker, options);

Confirmed that projPikcer() is returning a list of options but pickProj() callback isn't setting up the autocomplete list.

Hello 👋
@karthicksndr I've just found the same issue with all my autocomplete forms on my web app. Can anyone else confirm this or give any solutions?

@karthicksndr I don't know whether you found a solution, but changing 'null' to 'false' in the autocomplete object did the trick.

Courtesy of a commenter on YouTube (not from me):
The autocomplete list object was being populated correctly serverside (logs showed {bob=null, fred=null, jane=null} etc. but clientside, I was suddenly retrieving an empty object {}. After a LOT of headscratching, it seems something has changed with the way "null" is handled. Previously this worked:

options[v[0]] = null;

As of today (well, for me anyway, who knows how long it's been happening given server upgrades etc.) I need to use:

options[v[0]] = false;

Hope this helps!

Sean Doherty
@ArelGindosKornit there is a callback for on cycle to I believe, check the docs for that page (options)
Anthony Leonardi
I'm having trouble initializing new select elements. Basically I'm adding select elements to the DOM when a user clicks a button. I've tried re-initializing all selects, I've tried initializing just the selects that are added, but the 'new' ones never work. Here's a js fiddle of the code I've got (without the fixes I tried...). https://jsfiddle.net/AJLeonardi/szt1enob/23/
18 replies
I'm hoping someone out there has an easy fix. thanks!
Matthew Reichardt
Hey all! Is Materialize still supported? Meaning, is someone able to path the security vulnerabilities that are currently present? A merge has not occurred in a while.
1 reply
Hey guys
is anyone there
Iam trying to create a website where iam using materialize css. there I used a slider with 2 images. and text animation on those 2 images. now here what i want is a layer between the image and the text on both slides. and that layers should be transparent

Hey all! Is Materialize still supported? Meaning, is someone able to path the security vulnerabilities that are currently present? A merge has not occurred in a while.

Are you aware of the new fork?

2 replies
can anyone of you people help me in this
15 replies
Hi. I have a <select> element with a few AngularJS directives including ng-disabled and ng-change. When I initialize the <select> using const elems = document.querySelectorAll('select'); const instances = M.FormSelect.init(elems, {});
It seems the <select> is permanently set to whatever the value of ng-disabled was. However, ng-change continues to work.
hello, how can i customize the carousel like in circle
Hi guys, pls does anyone get succes to off autofill and autocomplete for matInput fields?
Hello. I'm working on a Ruby On Rails app with the Materialize gem, and I'm having difficulty solving an issue. I have two identical select menus on my page that are part of different ruby generated forums. Whenever I use the select menu twice on one page, neither instance appears
Hi, when using the multiple property on a select we notice that the placeholder remains after selecting options. Is there a way to remove this when an option is selected. The same way as single select?
We read that there is a fix for this and it looks like it is implemented but still dosn't work.
Hi, i have this problem in my database, with the date picker, the date data is corrupted
@alejandrogagocr how is the data getting in your database? If you are using the default DatePicker the formatting is almost certainly M d, Y but your database will require international format Y-m-d. Ont think this one can be blamed on the datepicker.

Hello guys! I'm developing a landing page for a personal project and I can't do a carousel/slider

I copy/paste this example https://materializecss.com/carousel.html#special but don't work for me

2 replies
<!DOCTYPE html>
<html lang="es">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comunidad.es — La plataforma de tu comunidad</title>
    <link rel="stylesheet" href="materialize/css/materialize.min.css">
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">Logo</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#">Visión</a></li>
                <li><a href="#">Equipo</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contacto</a></li>

    <div class="carousel carousel-slider center">
        <div class="carousel-fixed-item center">
            <a class="btn waves-effect white grey-text darken-text-2">button</a>
        <div class="carousel-item red white-text" href="#one!">
            <h2>First Panel</h2>
            <p class="white-text">This is your first panel</p>
        <div class="carousel-item amber white-text" href="#two!">
            <h2>Second Panel</h2>
            <p class="white-text">This is your second panel</p>
        <div class="carousel-item green white-text" href="#three!">
            <h2>Third Panel</h2>
            <p class="white-text">This is your third panel</p>
        <div class="carousel-item blue white-text" href="#four!">
            <h2>Fourth Panel</h2>
            <p class="white-text">This is your fourth panel</p>

         var instance = M.Carousel.init({
            fullWidth: true,
            indicators: true
    <script src="materialize/js/materialize.min.js"></script>
I think you forgot to add the jQuery file.
Hello everyone,
I am Ashish .Currently I am in 2nd year of my BTech degree. I am new to open source contribution but I am well aware of C/C++, python, HTML5, CSS, javascript, nodejs & a little in shell scripting. I would love contribute but could you please tell how to get started ?
Hello. I used Tabs to divide the file into a tab for using and a tab for managing.
When the file is small, 400px is not a problem, but when the file is large, it is cut off at 400px.
So, when I increase the px, the file comes out, but if I increase it too high, it scrolls and it looks bad.
I tried using height auto or 100% but it didn't work.
What should I do?
@fcoterroba <script>document.addEventListener('DOMContentLoaded', function () { M.Sidenav.init(document.querySelectorAll('.sidenav')); M.Tabs.init(document.querySelectorAll('.tabs'), { 'swipeable': true }); });</script>
Edit the code below to insert your sliders using only JavaScript without jQuery!
If add a swipe feature to the tab, it will be limited to 400px, so content longer than 400px will be hidden.
Currently, I'd like to add a swipe function. I am using it except for that.
If anyone has a solution please suggest me..!
I ran into another problem.
A dropdown option? that opens when you open the datepicker and select a year or month I am trying to modify the width of .
This is because left and right scrolling occurs.
If the width value is set to auto, it is just right.
How do I fix it?
It cannot be found because it is applied as element style.
What part of js do I need to modify?
is community is dead ?
Hi all, I need help