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
37
votes
5 answers

Centered form with material design lite

I am looking for an easy to get a login form centered on the screen using Google's Material Design Lite library. I've been through a number of iterations and this is the best I've come up with:
Clarkie
  • 6,818
  • 8
  • 33
  • 52
30
votes
10 answers

How to format select box with Material Design Lite?

I've read through the Components listing and read through the CSS provided, but I don't see any mention of select boxes - just regular inputs; text, radio, checkbox, textarea, etc. How do you use Material Design Lite with a select box? Using the…
Chase
  • 2,478
  • 2
  • 14
  • 22
27
votes
5 answers

Material Design Lite Integration with AngularJS

I am aware of Angular Material which helps implement Material Design specification for use in Angular single-page applications. I'm however taking a look at Material Design Lite alternative to integrate with my Angular project. I will like to know…
dantheta
  • 1,107
  • 2
  • 12
  • 29
17
votes
2 answers

Using Material Design Lite with React

I am trying to use MDL on an existing project that uses React, and I am running into several issues. Things seem fine on the first load, although there are many warning messages: Warning: ReactMount: Root element has been removed from its original…
Penar
  • 181
  • 1
  • 7
17
votes
8 answers

Toggle Material Design Lite checkbox

I'm using a material design lite checkbox and I'm trying to check or uncheck the element using JavaScript. I tried this: document.getElementById("checkbox-1").checked = true; That do not work. I tried the same approach with…
15
votes
4 answers

Keeping footer at the bottom of the page using Google MDL

As far as I can tell this isn't a duplicate question because it's a bit different than the other questions on this topic. I'm using Google's Material Design Lite and the footer will not stay at the bottom of the page properly. I've seen the…
CJK
  • 862
  • 2
  • 9
  • 21
15
votes
3 answers

What is the correct way to make a Material Design Lite table 100% width?

I'm looking into using Google's Material Design Lite framework and I'm wondering how I can make a table span a 100% width of it's containing element: Take this table:
Luke
  • 19,180
  • 30
  • 102
  • 166
14
votes
12 answers

How to hide drawer upon user click

How do I hide the drawer when the user clicks on an item? Or when a button is clicked?
Title
13
votes
2 answers

Why was material design lite(MDL) deprecated with MDC?

which of the 3 high-level goals did MDL fail: Production-ready components consumable in an a-la-carte fashion Best-in-class performance and adherence to the Material Design guidelines Seamless integration with other JS frameworks and libraries Or…
13
votes
2 answers

Material Design Lite navigation

How can I make submenu items in the navigation?
12
votes
1 answer

MDL + jQuery validate integration: Work-around needed for mdl-radio__button validation

What would seem to be a normal use-case of jQuery.validate with MDL has gone awry. See this gist. This works fine:

Without MDL

1
BrianTheLion
  • 2,440
  • 2
  • 22
  • 43
11
votes
2 answers

Material Design Lite JS not applied to dynamically loaded html file

I want to unify the navigation layout for my website, so I created a separate html file that holds the code for the navigation. I use a JS to load the file dynamically: $("#navigation").load("/navigation/navigation.html", function() { …
niko
  • 1,048
  • 1
  • 11
  • 24
11
votes
1 answer

Material Design Lite not working with Turbolinks

I have a simple page that has a header and drawer navigation, as below My problem is, whenever I navigate to another page, the drawer menu icon (hamburger icon) disappears. I was able to trigger the icon to show up using…
Yaobin Then
  • 2,334
  • 1
  • 27
  • 50
11
votes
8 answers

How to programmatically select a tab?

I am using a mdl tabbar from the layout component page.
Title
dflorey
  • 1,766
  • 2
  • 16
  • 29
10
votes
3 answers

Material Design Lite grid with tables

I am experimenting with the recently released MDL kit and trying to use the grid layout with cards and tables. what I found was the MDL grid is not as flexible as the Bootstrap grid for nested columns (probably 'cos I don't know enough about it…
Ishan Hettiarachchi
  • 778
  • 1
  • 9
  • 22
1
2 3
42 43