Dogfalo/materialize

Materialize, a CSS Framework based on Material Design

Willem Goudsbloem

@wgoudsbloem

Is there an easy way to adjust the material theme colours? For example material design talks in primaryColor, primaryColorLight, PrimaryColorDark, etc..

Sean Doherty

@doughballs

@wgoudsbloem yes, with Sass:

https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_color-variables.scss

https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_variables.scss

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

$primary-color is referencing the color set in _color-variables. The theme uses two main colors - teal and light red - so you could quickly change the whole theme by changing these two claues and then re-compiling the css file (as easy as opening the scss file and saving it if you use VSCode with live sass compiler installed)

Willem Goudsbloem

@wgoudsbloem

I was hoping to stay away from recompiling, but I guess that's the nature of the css beast :( Thanks for the pointer!

Anthony House

@tuffant21

You can use css to set colors, but you have to set it for each individual item. Kind of a pain tbh. That's the route I took, and now I wish I took sean's approach! :p

Willem Goudsbloem

@wgoudsbloem

yeah, I get that. my issue is that I ca't use the CDN now, so I have to set that all up which is more work than I hoped for.

albertrw83

@albertrw83

For the Materialize Chips autocomplete, once one chip is selected, how could I remove that as an autocomplete option when user is adding another chip?

weirdjon

@weirdjon

not sure if this has been asked before, but is there a way to make "hidden" work on css materialize select? only "disabled" and "selected" is working for options

Anthony House

@tuffant21

There is a hide class that hides the element

https://materializecss.com/helpers.html#hiding

weirdjon

@weirdjon

still shows the option even after adding the class 'hide'

the main dilemma i have though is when i use 'multiple' on a select and disabled the first option, that disabled first option will automatically be part of the selected values. i was thinking of hiding it instead but i guess it will not solve the problem

Anthony House

@tuffant21

Can you post the code on something like codepen and maybe some images of current behavior vs expected behavior

weirdjon

@weirdjon

https://codepen.io/weirdjon/pen/LYNgyOR

what i want is something like this image below but 1st option should remain as selected

Anthony House

@tuffant21

So if phone, chat, or email is selected, the select box should display phone, chat, and email. But, if they open the select again, the select modality should be selected?

weirdjon

@weirdjon

yes, the "Choose modality" should be seen on the dropdown

but i make it like that, the "Choose modality" is being selected and i cannot unselect it bcause it is disabled

Anthony House

@tuffant21

Oh, remove the selected attribute

It will be the default item shown, but won't show up once something is selected

weirdjon

@weirdjon

but i want the "choose modality" to be the default selected item

any other workarounjd?

Anthony House

@tuffant21

It would be the default selected item. Unless you mean something else?

weirdjon

@weirdjon

i actually have other select elements. this one is just a sample. adding "value=''" works for me. thank you

Anthony House

@tuffant21

Sure thing!

Sean Doherty

@doughballs

@wgoudsbloem & @tuffant21

Not sure how you are both set up but I write my styles in Sass, so anytime I hit save, I get a recompiled css stylesheet. If I'm working locally, the change is immediate via live reload (VS Code), if it's on a live site, I have the one extra step of FTPing the new stylesheet (CODA).

So recompiling for me is part of the build process and probably happens thousands of times each project.

GRawhideMart

@GRawhideMart

Hello! Does anybody know how to remove the border from a navbar? I want to make it fully transparent

Hello! Does anybody know how to remove the border from a navbar? I want to make it fully transparent

Nevermind, assigning it the class z-depth-0 did the trick

Orlando Paredes Hamsho

@orlando-paredes-hamsho

Hey! anyone here used to dealing with overly long labels?

Sean Doherty

@doughballs

@orlando-paredes-hamsho hi! Labels for inputs? Not personally. What's the problem? I often have issues with long placeholders though...

KOTESWAR RAO MEESALA

@koteswar375

Hey..is there a plan to add utility classes for display, margin, position, padding just in bootstrap

Haich Legodi

@HaichH

Hey guys... Is there an Angular library on npm for this?

Sean Doherty

@doughballs

@koteswar375 I don't think so - one of strengths of materialize is cleaner, more semantic markup. You can always write your own helpers, but ultimately, they are not the most maintainable solution. Imagine you have dozens of pages, and you need to adjust one of those helper classes, on some but not all divs that contain it...! Much easier to declare your global padding in your own stylesheet.

Anthony House

@tuffant21

@HaichH Yes there is: https://www.npmjs.com/package/angular2-materialize-v1 this is one I developed. It uses materialize >= v1.0.0
For versions <= 0.100 use this library https://www.npmjs.com/package/angular2-materialize

seano-hub

@seano-hub

Hello, i have a question/need help with this specific issue.. i am using Date picker.. i have disabled/hid time picker on it. I am using it to select date that is getting stored in db. I have set min date to "Today", i.e. user cannot select a date in past. Now when the same date picker is loaded and i try to set default date of date selected in past it sets it to "Today" because that is min date. Is there a way to still mark past date as selected but user can only select date today and onwards?

Sean Doherty

@doughballs

@seano-hub sounds like you want multiple selections? I don't think it's possible.

TristanDCP

@TristanDCP

Hi, is there a way to make the sidenav top link in mobile version fixed?

nvm I got it when I asked the question

seano-hub

@seano-hub

@doughballs no no.. so i still want only 1 selected date. The way i am using it is that you can open a dialog and see a selected date if any and be able to update the date. So lets say today is sep 18, i go to a dialog for first time, no date is selected and earliest date i can select is sep 18th. i go ahead and select sep21 and save it. Now when i reload the dialog, i see sep18 selected by default (because data was saved in db yesterday) . Problem happens if i open the dialog on sep22 or after,because "minDate: new Date()", so now the selected date shows "sep22" instead of "sep21" because that is before minDate.. did i do a better job explaining it now?

Sean Doherty

@doughballs

@seano-hub I'm still confused haha

Sean Doherty

@doughballs

@seano-hub is does seem to me that you want multiple select. You want them previous selected date, and you want the user to select a new date. That is multi select?

gabrielviteri

@gabrielviteri

Hi, i'm using chips but limit option is not working. Why could be the issue?

Anthony House

@tuffant21

Could be any number of things. Do you have any code to share?

gabrielviteri

@gabrielviteri

trying the same of the sample page:

<body><div class="chips chips-autocomplete"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/materialize.js"></script>
<script type="text/javascript">
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Android': null,
'Facebook': null,
'Twitter': null,
'Amazon': null,
'Google': null
},
limit: Infinity,
minLength: 1
}
});
</script>
</body>

Where communities thrive

People

Repo info

Activity