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

Dynamically disable MDL textbox via JavaScript

I need to disable Material Design Lite textfield via JS. I understand that I need to upgrade the element to MDL detects changes. I expected that to be done like this: $element.attr('disabled',…
kweensey
  • 53
  • 4
5
votes
1 answer

Material Design Lite Carousel

I am building a web application using Angular 4. For designing, I am using material design lite. However, I want to implement an interactive carousel using MDL that gives me smooth look and feel and goes well with my navbar but I cannot find any…
Saif Khan
  • 91
  • 2
  • 7
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
  • 343
  • 4
  • 20
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
  • 3,242
  • 8
  • 34
  • 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
  • 4,302
  • 10
  • 50
  • 104
5
votes
1 answer

I am getting 2 scroll bars using MDL, how can I fix it?

I am getting 2 scroll bars using mdl by google. I have added my html below. How can I fix this? View code on codepen
Samdeesh
  • 905
  • 11
  • 23
5
votes
2 answers

want to apper menu icon button in top right. in Material Design Lite

I want to move menu-icon-button in top right. But it appears under title. what kind of attribute or property should I add?
Anvar Erkinov
  • 67
  • 1
  • 8
5
votes
1 answer

Change width of drawer in MDL

I've just got started with Material Design Lite. I want to change the width of the drawer. What I have tried is something along these lines: .mdl-layout__drawer { width: 25%; } This results in the drawer overlapping the content area. How do I…
dshgna
  • 812
  • 1
  • 15
  • 34
5
votes
2 answers

dynamically built input using MDL does not render correctly

I have the following code, var loginForm = document.createElement('div'); loginForm.className = 'row'; loginForm.innerHTML = '
Grady D
  • 1,889
  • 6
  • 30
  • 61
5
votes
1 answer

How to hide an open drawer in material design lite

I have a set of links inside of a drawer. Just like the navigation example here: http://www.getmdl.io/components/index.html#layout-section/layout The only difference is that my links don't cause a page to refresh (it's a single page app built with…
Mike McKay
  • 2,388
  • 1
  • 29
  • 32
5
votes
1 answer

What does the class "is-upgraded" in material-design-lite do and how is it set?

I'm implementing Material Design with Material-Design-lite in a React app. When I'm using TextField w/Floating Label within my top component, it works. But on a component called by by top component, it doesn't. TextField w/Floating Label then acts a…
Dan
  • 781
  • 1
  • 7
  • 16
4
votes
2 answers

Material Design Lite slider update

I've been trying to use MDL sliders to make my website, but I get a problem. Everything is working, however, when I try to change the value of the slider through jQuery, the "bar" of the slider isn't synced as you can see here : or the "blue…
heromato
  • 75
  • 5
4
votes
0 answers

Refresh Material Design Lite Opened Menu

I'm trying to find a way to refresh the material design lite menus when they are opened. For example, I have a shopping cart and when an item is deleted with the menu opened, I want the menu to resize to the user. I've tried using…
Jason Biondo
  • 693
  • 1
  • 12
  • 19
4
votes
1 answer

CSS not rendering correctly after ajax update using

this one is kind of complicated. Basically I am using Material Design Lite css by google and firing an ajax request to add input fields dynamically using primefaces.
Progph
  • 147
  • 1
  • 1
  • 9
4
votes
1 answer

Use getmdl with React + React Router throw a DOMException

This is a basic example and you can see the source code here and in action here. Please, use getmdl branch git clone -b getmdl https://gitlab.com/problems/react_router_mdl_js.git When I use mdl-js-layout in two components and try to navigate from…
ridermansb
  • 10,779
  • 24
  • 115
  • 226
1 2 3
…
42 43