Dogfalo/materialize

Materialize, a CSS Framework based on Material Design

supergnaw

@supergnaw

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.

Junior

@Muhammad-Waleed-Hafeez

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.

Junior

@Muhammad-Waleed-Hafeez

<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>
                        </select>
                        <span asp-validation-for="CityId" class="text-danger"></span>
                    </div>
                </div>

this is my code

Bharath8785

@Bharath8785

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

@karthicksndr

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>
   </div>

this is my autocomplete element


google.script.run.withSuccessHandler(pickProj).projPikcer()
  });

  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.

Stephanieliling

@Stephanieliling

Hello 👋

beaulowenstern

@beaulowenstern

@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?

beaulowenstern

@beaulowenstern

@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

@doughballs

@ArelGindosKornit there is a callback for on cycle to I believe, check the docs for that page (options)

Anthony Leonardi

@AJLeonardi

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

@matthewjamesr

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

Bharath8785

@Bharath8785

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

jshster

@jshster

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

Bharath8785

@Bharath8785

can anyone of you people help me in this

15 replies

jshster

@jshster

dgoersvocera

@dgoersvocera

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.

aISA

@IsaAgverdiev

hello, how can i customize the carousel like in circle

David

@ddtch

Hi guys, pls does anyone get succes to off autofill and autocomplete for matInput fields?

murphcoder

@murphcoder

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

FilipExor

@FilipExor

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?

FilipExor

@FilipExor

We read that there is a fix for this and it looks like it is implemented but still dosn't work.

alejandrogagocr

@alejandrogagocr

Hi, i have this problem in my database, with the date picker, the date data is corrupted

jshster

@jshster

@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.

Bryn3ds

@Bryn3ds

fcoterroba

@fcoterroba

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">
<head>
    <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">
</head>
<body>
    <nav>
        <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>
            </ul>
        </div>
    </nav>


    <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>
        <div class="carousel-item red white-text" href="#one!">
            <h2>First Panel</h2>
            <p class="white-text">This is your first panel</p>
        </div>
        <div class="carousel-item amber white-text" href="#two!">
            <h2>Second Panel</h2>
            <p class="white-text">This is your second panel</p>
        </div>
        <div class="carousel-item green white-text" href="#three!">
            <h2>Third Panel</h2>
            <p class="white-text">This is your third panel</p>
        </div>
        <div class="carousel-item blue white-text" href="#four!">
            <h2>Fourth Panel</h2>
            <p class="white-text">This is your fourth panel</p>
        </div>
    </div>



    <script>
         var instance = M.Carousel.init({
            fullWidth: true,
            indicators: true
        });
    </script>
    <script src="materialize/js/materialize.min.js"></script>
</body>
</html>

qpajrathod09

@qpajrathod09

I think you forgot to add the jQuery file.

IshwaranRudhara

@IshwaranRudhara

hellow

ashish-nath

@ashish-nath

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 ?

monocela

@1stetcgoldmedal

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!

monocela

@1stetcgoldmedal

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..!

monocela

@1stetcgoldmedal

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?

monocela

@1stetcgoldmedal

is community is dead ?