Dogfalo/materialize

Materialize, a CSS Framework based on Material Design

nikith14

@nikith14

@doughballs this is the structure of select .How do i manipulate data on it .

Sean Doherty

@doughballs

@nikith14 that’s the structure of the dropdown, no the select. Look below this for the original select that you used. That’s what you need to update using JavaScript/jQuery

Elias

@eliasnemr

Hey, I have a quick question - how come my form select (which I put in a <li> tag) is being overlay-ed by the parenting-div.. how do i overcome that? I want the select window to be appended to the body instead

Sean Doherty

@doughballs

@eliasnemr we'd need to see this...

Elias

@eliasnemr

Sean Doherty

@doughballs

@doughballs do you mean you'd like the dropdown to appear below the trigger, rather than cover it?

Elias

@eliasnemr

Yes

Sean Doherty

@doughballs

when you initialise the select, pass dropdownOptions = {coverTrigger: false}

So:

M.FormSelect.init(elems, { dropdownOptions = {coverTrigger: false} })

Elias

@eliasnemr

Great, thanks

Sean Doherty

@doughballs

@eliasnemr let me know if it doesn't work, that was off the top of my head (untested) but should be right...

Manojkumar Palanisamy

@SmartManoj

```<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<h4 style="text-align: center">Hello Rooster 🐔</h4>

<div class="row">
<div class="col s6">
<a onclick="M.toast({html: fname})" class="btn">Toast!</a>
</div>
</div>```

When clicking toast, the input field is moving

Elias

@eliasnemr

It wasn't what I was looking for, but I got it working by setting overflow: unset on the <ul>

hcrev

@hcrev

Heya, is it possible to pass options or select to the select form (and select an option) via js? Found dropdownOptions in the Select docu but does not seem to specify the syntax for passing in data.

M.FormSelect.init(elem, {
          'dropdownOptions':{
               'data':[
                   {'option': 'Option 1', 'selected': true},
                   {'option': 'Option 2}
               ]
          }
 });

hcrev

@hcrev

just in theory.. but looking for something like this.

Sean Doherty

@doughballs

@hcrev the init is something that runs on the select, and turns the options into a dropdown. So as it stands you can set options this way. You could write a mini function that populates the select, and then run the init.

*’can’t set options this way’

hcrev

@hcrev

@doughballs That sounds good I'll do that instead, thanks 🙌

Julià

@pujoljulia

Does someone know how to disable a float button? Seems that by adding the disabled class it doe snot work

Did someone encounter that situation before?

Sean Doherty

@doughballs

@pujoljulia do you mean a FAB? It does work, i just added the class in the inspector and it greyed out.

https://materializecss.com/buttons.html#floating

<a class="btn-floating waves-effect waves-light btn-large red disabled"><i class="material-icons">add</i></a>

Julià

@pujoljulia

… don’t know why is not working on my app - Thanks @doughballs, now I know I am doing something wrong

computerwiz12890

@computerwiz12890

@doughballs So back to this issue...

Just had someone report to me it is happening again, so I inspected the elements.

Everything appeared normal. In fact, when I turned off a styling (like the font-size) and then turned it back on, the icons appeared just fine.

Could this be because I have the link to the plugins at the TOP of my page, instead of at the BOTTOM, like most people tend to do? I prefer my page to look like it's delaying, but then load 100% the way it will look...

Bikash Sahu

@bikash44

@doughballs I want to add n number of image to Carousel.but need to display on 5 image at a time and when i scroll slider all image will come one by one. is it possibe in https://materializecss.com/carousel.html this slider ?

Sean Doherty

@doughballs

@computerwiz12890 that sounds like it could be an issue. As a hard rule - styles in the head, JS just before closing body tag.

@bikash44 that is the default setting - show 5, scroll 1. Is that not what you’re looking for? See the options field underneath for customisation options.

WAPEETY

@WAPEETY

I would like to make a portfolio theme, ideas?

computerwiz12890

@computerwiz12890

Thanks for the "hard rule" @doughballs, I will give that a shot.

Sean Doherty

@doughballs

@tuffant21 or anyone else - have you got a fix for preventing dropdowns from closing when the tab key is pressed?

Scrap that. Its's simple https://stackoverflow.com/questions/62261978/prevent-dropdown-closing-on-pressing-tab-in-materialize-css-menu

Anthony House

@tuffant21

Nice 👍

I actually just had a very similar problem with a button being over another clickable card. Had to do stopPropagation

Marten

@martendegroot

I was wondering; in my browser https://material-ui.com/ switched to a dark mode version, but on my local version it didn't. Anyone an idea A) where I could find this feature and otherwise B) how I could activate this dark mode manually?

Sean Doherty

@doughballs

@martendegroot that site isn’t connected to this Gitter...

Chessking22

@Chessking22

@dogfalo or anyone else, as a User Experience Designer using Sketch, I'm trying to locate a Materialize sketch template to create some mock-ups. Does one currently exist?

JorgeEDR

@JorgeEDR

Hi, somebody can help me please? when the user do scroll, i want the navbar change color, but only when it scrolls, ¿ how i can do that in materialize? tnxs!

Michael Murphy

@murchu27

Hey all, could I get some help with a navbar (on v0.100.2)? Is there a native way to get it to close when you click somewhere else on the page? The ones on the documentation does this, both the demo navbar and the actual website's navbar (only when using a smaller screen). Is this built into materialize or would this need to be coded up?

Michael Murphy

@murchu27

Those two sidenavs also dim the rest of the screen while they are open - is this an option that can be enabled when initializing the sidenav, or does it have to be added in manually?

Sean Doherty

@doughballs

@murchu27 do you need to use 1.0.2?

@JorgeEDR there is no in built Materialize nav scroll function, but it’s very easy to implement:
https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling

Michael Murphy

@murchu27

@doughballs Not desperately, that's just what we have at the moment and it would be less than ideal to upgrade right now

Where communities thrive

People

Repo info

Activity