Dogfalo/materialize

Materialize, a CSS Framework based on Material Design

TristanDCP

@TristanDCP

thanks

In the end I ended up doing the media queries. Quite redondant but it works I guess

Paolo-N

@Paolo-N

Hi Everybody! I'm a developer from Italy, I just joined room because I think I found a bug and I'd like to get feedback from you guys! :)

Sean Doherty

@doughballs

@Paolo-N hey!

Paolo-N

@Paolo-N

I'm currently using latest versions of jquery and materializecss, I noticed that using textareaAutoResize like this M.textareaAutoResize($("#textarea_id")) autoresizing will not working properly, using it like this instead M.textareaAutoResize($("#textarea_id")[0]) makes everythink work fine. Can you give me a feedback?

@doughballs Hi Sean!

Sean Doherty

@doughballs

@Paolo-N I think that's because the selector returns an array...

Paolo-N

@Paolo-N

@doughballs yes I think you're right, I just said this because if you read docs they suggest to do it in the first way

I'm new to all this stuff, should I open an issue on github suggesting the docs update?

Sean Doherty

@doughballs

@Paolo-N you can open an issue - the docs needs a total overhaul - but tbh very little in being done at the moment so don't hold your breath! If you have any questions or issues, you're much more likely to get a response in here.

ShohjahonIbrohimov

@ShohjahonIbrohimov

Hi everyone, I am having trouble when I try to put the data that I get from an external API inside Materialize CSS select options. In fact the external data isnt showing up inside options. Here is the Github repo: https://github.com/ShohjahonIbrohimov/form

Sean Doherty

@doughballs

Not sure where this breaks down but you need to run a loop and append an <option> inside the select for each one. Then when this loop has run, run the initialisation on it.

ShohjahonIbrohimov

@ShohjahonIbrohimov

Sean Doherty Thanks a lot!!!, I found the solution from your last word. The problem was that I first initialised and then ran the loop but now I fixed it and it is all working fine.

Sean Doherty

@doughballs

🙌

Martin Oviedo

@ndawebs

select {
display: none;
} on line 13???

I was trying to see why the select of a form disappeared and materialize.min.css in line 13 hides them: P

Sean Doherty

@doughballs

@ndawebs materializecss hides the native select element (as you’ve seen) and replaces it with two new dynamically generated components - a dropdown, triggered by a text input.

Martin Oviedo

@ndawebs

I am making a template for wordpress and use materialize but it collides with Facetwp which is a plugin that does ajax searches, it does not generate any statements, it only shows a blank space. when changing the property of the css class, the select appears.

Aaron Dolgin

@Aaron691

Anyone know the syntax for minDate option for datePicker?

Sean Doherty

@doughballs

@Aaron691 minDate: new Date('2020-05-09')

@ndawebs I'd need to see the page in action, ut what you can do is simply targe the page that needs to show the select, and overide the css:

.search { select { display: block !important; } }

Aaron Dolgin

@Aaron691

@doughballs
Like this Sean?

    var datePicker = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(datePicker, minDate: new Date('2020-08-15'));

When I do that It breaks the calendar Pop up on the webpage.

Sean Doherty

@doughballs

@Aaron691 not quite.

@Aaron691 see https://codepen.io/doughballs/pen/NWGzJpX

var datePicker = document.querySelectorAll('.datepicker');`
 var instances = M.Datepicker.init(datePicker, { minDate: new Date('2020-08-15')});

Options for every component is an object {}

Aaron Dolgin

@Aaron691

Interesting good to know. Thank you for your help . @doughballs

Dante Meulemeester

@jandante

Hi, does anyone happen to know by heart how i can trigger a change on a text input? I'm programmatically setting the value of a text input in Materialize, but the label stays on top of the input field value. Only when I focus on it the labels moves to the top.

Dante Meulemeester

@jandante

Fixed it by adding the active class to the label after updating the input field. Sorry for the unneeded question :)

Sean Doherty

@doughballs

@jandante from the docs:
“If you are having trouble with the labels overlapping prefilled content, Try adding class="active" to the label.
You can also call the function M.updateTextFields(); to reinitialize all the Materialize labels on the page if you are dynamically adding inputs”

computerwiz12890

@computerwiz12890

With the calendar control, is there a way to make today's date stand out a bit more? Either make the day bold, or put a light ring around it (like in my screenshot)?

Devansh

@dev10110

Hi everyone! Im new to this Gitter channel, but thought I could update the documentation for sidebars a bit. I realised a default value for options wasnt specified in the example documentation, and thus was giving me issues in my development. Ive made a (very small PR) with a single line addition, #6594. do i need to take any additional steps to get it merged in?

Sean Doherty

@doughballs

@computerwiz12890

td.is-today button.datepicker-day-button {
    border: 2px solid #26a69a;
    color: #26a69a;
}

https://codepen.io/doughballs/pen/dyopgpa

@dev10110 hey! Not sure tbh, but good pickup - that options variable needs removing!

computerwiz12890

@computerwiz12890

Groovy! Thanks @doughballs :-)

Devansh

@dev10110

@doughballs i could remove it, but in materializecss/materialize#19 i just added options as an empty array everywhere i think it could be helpful. i think keeping the variable is probably more useful, in case someone wants to edit it, its immediately clear where to edit

Sean Doherty

@doughballs

@dev10110 yeah I suggested three potential fixes to this in an issue posted over a year ago. The problem with declaring options is that it doesn’t appear in the jQuery init. So that would need adjusting to make it crystal clear. The whole docs around initialisation need an overhaul.

computerwiz12890

@computerwiz12890

I think the "grey" color in Materialize is missing a hover color....

I know about the ":hover" tag in CSS, but I don't think that's how Materialize handles that animation. Can someone point me in the right direction, so I can do it correctly, the Materialize way?

computerwiz12890

@computerwiz12890

Looks like there might be a few other colors besides "grey" that are affected like this. But "grey" is all I care about for now...

ppkris

@ppkris

is it just me that I can not read the docs on the website and there is no response by pressing the css or component button?

ppkris

@ppkris

now it's working, thanks

Sean Doherty

@doughballs

@computerwiz12890 just a standard hover:

.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #2bbbad;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px 
    rgba(0,0,0,0.2);
}

Steve CHI-YUAN LENG

@avgsteve

Hi everyone,

I got some warning message in Chrome like: " [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive."

I guess there some features required this event listener. So is there anything I can do about it?

Also , I saw this on Github: material-components/material-components-web#4747 Looks like it's been fixed?

Just would like to know how to fix it and thanks

F S

@MojoKingBee

hi all,
I have 2 datipicker, how can i assign 2 different functions on the 'onClose'

Sean Doherty

@doughballs

@avgsteve hey, I think that is a different library you're referring to, but would be good to get a fix I agree.

@MojoKingBee

onClose: function() {
// do something
// do something else
}

F S

@MojoKingBee

@doughballs can't understand how to decide wich "something" is to do, how to distinguish wich picker is used?

matrixbot

@matrixbot

dicklover68 F S (Gitter):

Where communities thrive

People

Repo info

Activity