Stack Overflow
Stack Overflow

Questions tagged [material-design-lite]

Material Design Lite (or MDL for short) is an implementation of Material Design for the web by Google. Take note that Material Design Lite is currently in **limited support**, which means that no further development is taking place. Consider using Material Design Components for the Web instead.

Current version

v1.3.0

Purpose

From its GitHub repository:

An implementation of Material Design components in vanilla CSS, JS, and HTML.

Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

Support

As of 4 March 2018, MDL is currently in limited support. This means that no more work is taking place in the project.

Limited support

Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository.

No further development is taking place in MDL by the core team, but we are happy to review PRs, fix critical bugs and push out new releases. No breaking changes will be accepted.

More info

Resources

644 questions
6
votes
1 answer

how to apply a material design to file input tag?

I'm designing a website using google's material design lite, in my home page I have a file input tag the problem is that I can't find the appropriate mdl classes for styling this element
Ali HS
  • 99
  • 1
  • 10
6
votes
0 answers

Pre filled MDL textfield causing issue with Angular2

I am working in a project with pure MDL and Angular2, but I am having an issue with the textfields and ngModel. When the angular component set some value to the object used in the model the MDL component doesn't run the dirty and validity check…
Henrique Rotava
  • 481
  • 5
  • 11
6
votes
2 answers

material design lite - change drawer icon color

I can't find a way to change the drawer hamburger icon. Let's the code doing the talk : THE CODE drawer icon color
lemour_a
  • 125
  • 1
  • 6
6
votes
1 answer

Delay and Manually initialize mdl materialLayout

Strange bug..... I have a race condition where my angularJS directives for header and drawer are compiling after material-design-lite initializes the layout. It only seems to happen when I shut my wifi off and work offline. No remote resources are…
d-_-b
  • 18,782
  • 33
  • 120
  • 200
6
votes
2 answers

Using Angular2 With Material Design Lite

I am learning Angular2 but I have problem about using Angular2 with MDL. Why MDL navigation bar is not working with Angular2? When I use Navigation bar with header and drawer, drawer is not working so I cannot click on it, I cannot see drawer's…
Soulmaster
  • 93
  • 1
  • 8
6
votes
4 answers

Chrome autofill with MDL for type="password"

I'm currently working on my website with the MDL (Material Design Lite) from google and I have a little problem. As you can see, the stars are in the good place but the password stay here (he is moving after any click or press on the keyboard) My…
Nicolas_LeBot
  • 305
  • 3
  • 14
6
votes
3 answers

MDL ready event

MDL is upgrading its components upon page load, so with autofocus attribute looses its focus. I want to set a focus on this input after MDL finishes rerendering. I'm trying to listen to some page ready event…
mu3
  • 565
  • 6
  • 16
6
votes
1 answer

Material Design Lite hamburger menu not centered in header

I'm copying code directly from getmdl.io (the component page) and on all devices (multiple PCs, browsers, phones, etc) the hamburger menu is not centered in the header. I can't seem to isolate the menu icon in the css to realign it. All the…
Mike H
  • 99
  • 7
6
votes
1 answer

Material design lite, Check if scroll reached to the bottom

I am Using Material Design lite with Angular.js. Having the problem to get the event called when the event reach to bottom. I have tried almost every solution but not working. Like jQuery solution : $(window).scroll(function() { …
Rahul Sagore
  • 1,388
  • 20
  • 39
6
votes
1 answer

hamburger icon is not showing up even if I call componentHandler.upgradeDom();

6
votes
3 answers

How to make an Angular Material table responsive

I have a simple table with numerous columns, and I would like the columns to shrink automatically when sizing the browser window. The table-responsive works with Bootstrap, but I am looking for something similar for Angular Material. I am trying…
Steven Scott
  • 6,905
  • 5
  • 48
  • 88
6
votes
6 answers

How to hide the icon menu on large screens?

I'm new at this and let me know how to hide the menu icon , and it adds automatically without being prompted, i want only to display on small screens. Sorry for the bad English. Thank You.
Juan Henriquez
  • 131
  • 1
  • 4
5
votes
1 answer

Material Design Lite - Bottom Line in text field has a slight gap with colored line

I am trying to get Material Design Lite text field to work and I have an issue where the bottom colored line has a slight 3-4 px gap between the gray starting line. Any MDL text Field example I plug into my page I get the same result, what can…
freeBeerTomorrow
  • 333
  • 4
  • 19
5
votes
1 answer

Google MDL: drawer icon not centered

I'm trying the fixed tab example from the Google MDL documentation. Here is my code: CODE
bodruk
  • 2,842
  • 6
  • 29
  • 52
5
votes
3 answers

angular 2 getting hold of an element in Angular 2 for use in Material design lite

I want to use the Material Design Lite snackbar in Angular 2. I tried to get hold of the Element in my template as the following: My template
child1
child2
…
kosta
  • 3,274
  • 7
  • 42
  • 77
1 2
3
…
42 43