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

640 questions
11
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
  • 1,426
  • 2
  • 19
  • 31
9
votes
3 answers

How to use Modal Pop up with Material Design Lite?

I recently started using the latest Desktop version of Google Material Design Lite, I figured it doesn't have a modal pop up and the team has not yet implemented it for the next release. I have tried to include bootstrap model into it, but thats not…
foo-baar
  • 1,076
  • 3
  • 17
  • 42
9
votes
5 answers

How can I hide drawer on large screens and show just on small screens.?

Even though I add "mdl-layout--small-screen-only" class on the drawer, the hamburger image still appears on large screens.
Kiba
  • 10,155
  • 6
  • 27
  • 31
9
votes
1 answer

Why should I start using Google Material Design Lite instead of Twitter Bootstrap or Foundation

Disclaimer: I don't want to start any fight against Google Fanboys. I'm just asking because I didn't find a direct answer to my question and maybe someone who already started working with it (or any googledev) can give advice. Google recently…
viarnes
  • 2,018
  • 2
  • 19
  • 31
8
votes
1 answer

Bootstrap or Material Design Lite or Both

I am creating websites from last 6-7 years and Using Bootstrap since Bootstrap 2 is launched and love to use bootstrap 3. Now I am trying to use Google Material Design Lite, so My Question is "Do I need to use Bootstrap framework for using Material…
Frontend Dev Web Accessibility
  • 215
  • 2
  • 9
8
votes
2 answers

How to use Custom colors with Material Design Lite?

I am new to Material Design Lite. I want to use a custom color scheme, particularly the primary color and accent color. I have seen their theme builder tool, but it only offers a few colors. How can I do that? How can I use custom (primary and…
Shy
  • 542
  • 8
  • 20
8
votes
2 answers

Material Design Lite (MDL) Navigation Drawer on the right side

I am using Google Material Design Lite (MDL) for web and I am unable to put the navigation drawer on the right side. The documentation has none information about how to do that. Is that even possible? The default drawer always come from the…
Fred Vanelli
  • 662
  • 8
  • 9
8
votes
2 answers

Material Design Lite + React - Issues with Tooltips

Recently, I have been integrating Material Design Lite into my React web application. For the most part, everything has worked out just fine, but currently I am having some issues with React's event handling, which doesn't seem to play nice with…
Michael Parker
  • 12,724
  • 5
  • 37
  • 58
8
votes
2 answers

Open navigation drawer on swipe (Material Design Lite)

I'm using Material Design Lite to create a UI for an app in a web view however I have come across a problem where I can't deploy the navigation drawer on swipe. I am using this jquery code to recognise the swipe event $(function() { …
Isaacm
  • 389
  • 5
  • 16
8
votes
4 answers

How can I make header scrollable for smaller screens in MDL?

With MDL 1.0(http://www.getmdl.io/) I'm trying to make a header scrollable on bigger & smaller screens. But it is scrollable only on bigger screens(like on my pc), but not on smaller screens. Here's the html:
raulx222
  • 137
  • 1
  • 12
7
votes
1 answer

Horizontal and vertical center card in material design lite(MDL)

I, am trying to center the card vertically and horizontally in the center of the page. I, am able to center the card horizontally. But not able to center it as vertically. I didn't found any class in MDL to vertically center the card. Code for…
San Jaisy
  • 15,327
  • 34
  • 171
  • 290
7
votes
3 answers

Change color on mdl-textfield

Is there a built in way to change the color of a Material Design Lite text field? In particular, the default text and underline before the text field is used. In the below example the "Text..." and underline are gray by default. I need them to be…
andrew
  • 4,991
  • 5
  • 24
  • 27
7
votes
1 answer

Autocomplete/search suggestions with Material Design Lite?

so there's no built-in mechanism in material-design-lite v1.x for "chips" or lists to be attached to an input/search field, and/or be populated/displayed in response to an event. I found this: http://immybox.js.org/ — but is there a best practice in…
Ben Guild
  • 4,881
  • 7
  • 34
  • 60
7
votes
2 answers

Angular2 ngFor elements with Material Design Lite

I'm struggling to make Material Design Lite component to work with dynamically added elements via *ngFor. I understand that I need to call componentHandler.upgradeElement, but where do I put this call? I was trying this and this directives but they…
Alexander Zhidkov
  • 531
  • 1
  • 5
  • 16
7
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 Le Bot
  • 324
  • 5
  • 15
1
2
3
…
42 43