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
4
votes
3 answers

MDL table retrieve data checked values

I'm using tables of MDL lib. https://getmdl.io/components/index.html#tables-section­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ But there are no docs how I can retrieve checked values about. I found…
WebArtisan
  • 3,996
  • 10
  • 42
  • 62
4
votes
3 answers

How to align Material Design Lite cards to right hand side

I'm trying to build a simple page which have cards using material design lite components but one problem stucks the whole layout of the page. How to align the mdl card to right hand side of the screen ? I have tried by float:right; in css then the…
Akshay Soma
  • 87
  • 2
  • 3
  • 9
4
votes
3 answers

Modifying MDL elements on page load

I am trying to set the value of a mdl slider when a page loads. The recommended way of setting the value for a mdl slider is like this- document.querySelector('#slider').MaterialSlider.change(value); This however throws an error TypeError:…
charsi
  • 2,917
  • 22
  • 40
4
votes
0 answers

Prevent Material Design Lite Menu from closing on mouse up

I made a login form inside an mdl menu but it keeps closing when the mouse button is released after a click on it, hence I have to use tab so I can log in. This is the button:
4
votes
0 answers

Custom validation in MDL

I'm currently making an HTML registration form that completely relies on AJAX and JavaScript (no libraries please), also using MDL. My problem is that I want to validate the email and the username real-time, i. e. onBlur the AJAX makes a call to the…
km6
  • 2,191
  • 2
  • 15
  • 18
4
votes
3 answers

Material Design Lite (MDL) VS Angular2 Material in Angular2 app

There are a few Angular2 tutorials on YouTube and other learning sites, some of which have used Material Design Lite (MDL) and some have used the new Angular2 Material for demonstration purposes. Considering that Angular2 Material is still pretty…
Neville Katila
  • 329
  • 5
  • 20
4
votes
3 answers

Material Design Lite Styling Inputfields

I'm having some difficulties styling mdl-textfield. Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field. Effectively, this is my starting point, as taken from the component…
Martin
  • 352
  • 3
  • 15
4
votes
2 answers

Material design expandable drawer

I am developing a web application using Material Design Lite. One of the requirements is this: A sidebar exists such that by default, it will display the icons of the menu items at a smaller width (say 50px). Clicking on the menu (hamburger) icon…
arazzy
  • 495
  • 1
  • 8
  • 23
4
votes
3 answers

Material design lite stretch vertically mdl-cards

How do I stretch vertically mdl-cards so that everything is even out? I'd prefer the mdl-card__suporting-text to be stretch. Here's an example http://codepen.io/anon/pen/grGbdb
123 456 789 0
  • 10,565
  • 4
  • 43
  • 72
4
votes
1 answer

Vertical Division in a Material Design Lite Card

I am using Material Design Lite Website Link Here There is no way whatsoever to make a vertical division in card as per documentation given there. For Divisions generally grid layout is used in material design but when I am making use of grid then…
Gandalf the White
  • 2,415
  • 2
  • 18
  • 39
4
votes
1 answer

MDL Component Not working with React

I was following the Facebook's react tutorial and was playing around with it. When i tried to integrate MDL with my page (from getmdl.io), its not working. In my index.html; i have added links to their css and js files. I also installed mdl using…
shobhit1
  • 634
  • 7
  • 18
4
votes
2 answers

How to scale MDL spinner?

It there any way to scale MDL spinner? I tried to change it's widht and height properties, but it becomes thiner. Take a look: CSS width: 150px; height: 150px Result
Viktor
  • 4,218
  • 4
  • 32
  • 63
4
votes
1 answer

Hamburger button not propely aligned using Material Design Lite

I have this simple code: