Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 16 21:22
    DanFeather commented #2582
  • Nov 16 17:10

    acburst on gh-pages

    Removed deleted patrons (compare)

  • Nov 14 20:31
    leonardorafael commented #6615
  • Nov 07 19:35
    solroi commented #6536
  • Nov 07 19:35
    solroi commented #6536
  • Nov 07 00:44
    jgarza9788 commented #6637
  • Nov 05 20:00

    acburst on gh-pages

    Alt text change (compare)

  • Nov 03 16:48
    rober423 closed #6672
  • Nov 03 16:26
    rodrigovallades edited #6669
  • Nov 03 16:22
    nathankoop closed #2490
  • Nov 03 16:22
    nathankoop closed #2479
  • Nov 03 10:59
    Jerit3787 commented #6669
  • Nov 03 10:58
    Jerit3787 commented #6674
  • Nov 03 10:57
    Jerit3787 commented #6675
  • Nov 03 10:26
    0sleep opened #6675
  • Nov 01 14:55

    acburst on gh-pages

    Patreon November (compare)

  • Oct 19 16:20
    sgalzin opened #6674
  • Oct 14 08:42
    DawidKK opened #6673
  • Oct 01 16:49

    acburst on gh-pages

    patreon update october (compare)

  • Oct 01 12:42
    RaphaelFelten closed #6190
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.
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
image.png
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
image.png
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):
Sean Doherty
@doughballs
@MojoKingBee if you use $('.datepicker') as your init, then this will apply to all datepickers. One possible way would be to run a separate init for each picker using ID instead. $('#datepicker1'), or you could maybe even run an if statement in single datepicker init that checks which one is open.
F S
@MojoKingBee
@doughballs
thanks for the patience.
next question -no surprise- is: how can I check wich one is open?
I'll try to figure by myself, but if someone has a suggestion is really welcome
the first solution (already tried) is not working (at least in my case).
F S
@MojoKingBee
Found a way, thanks
computerwiz12890
@computerwiz12890
@doughballs I see. But that standard hover is not working for "grey" colored buttons. :-/
matrixbot dicklover68
Oladejo Aderopo S.
@royalcode
Please can anyone help me on how to change date format using datepicker
Sean Doherty
@doughballs

@tuffant21 or anyone else - any idea how to adjust sidenav to remove this warning:

materialize.min.js?ver=1.0.0:6 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

ie how to make event hander passive?

@royalcode this may help: https://codepen.io/doughballs/pen/PoZbmOV
Anthony House
@tuffant21
@royalcode on the docs it specifies the format option https://materializecss.com/pickers.html
image.png
@doughballs when you add an event listener, it's usually in the form of element.addEventListener(type, callback, options)
If you pass in false in the options, I think it fixes that
Sean Doherty
@doughballs

Answered my own question re the event listener thing:

materializecss/materialize#20

Eden0624
@Eden0624
How can i change the size of a button? I saw that the size button have been set by "btn-large"
Sean Doherty
@doughballs
There are two utility classes provided - .btn-large and .btn-small - if those aren’t enough, you can just change height on .btn
wristtattoo
@wristtattoo

I have been working on a much needed wireframe component library in Figma for Materialize CSS. Soon to be published for free. Stay tuned:

You can view my progress here: https://dribbble.com/shots/7477541-Materialize-CSS-Wireframe-Component-Library-in-Figma

@wristtattoo any update on this? Are you still working for it?

Very late reply - apologies. The Materialize CSS Figma library can now be downloaded from my Figma Community Page here - https://www.figma.com/@terrywells

Alex Chervet
@alexchervet
Quick Auto Picker Question: When creating an auto picker it's possible to include text and an Image specified by a URL. Looks great when the picker is open and you see people's names and profile pics. However once you select someone from the drop down the input only shows text. Picture (URL) is gone. Is thee an option to show both text and the URL picture once the selection has been made?