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
0
votes
1 answer

How to include bower component (getmdl) js into ember?

I install material-design-lite via bower .. So I include into my app .. var app = new EmberApp(defaults, { sassOptions: { includePaths: ['bower_components/material-design-lite/src'] } }); …
ridermansb
  • 10,779
  • 24
  • 115
  • 226
0
votes
1 answer

within mdl-card__supporting-text not properly shown

I'm trying to use within mdl-card__supporting-text but if the image is bigger than the card, the image would not scaled to fit within the card's supporting text area. See the codepen for example. See how the right side of the image is covered…
Sam
  • 1,288
  • 1
  • 13
  • 22
0
votes
1 answer

Loading of material design lite

I wanted to use the material design lite library on my asp.net webform page, but I have load problems with some components. For example with the radio button element. When the page loads, it shows the styled radio button first and after 1 second it…
Che4ter
  • 9
  • 4
0
votes
2 answers

How to bind component id as parent relative path to HTML element inside template

I am using Angular2 RC1 version and Material Design Lite. I am going to implement an independent grid component. A custom property called Id is used to identify the component. export class GridComponent { @Input() public id: string; } I am…
Edmond Wang
  • 1,687
  • 13
  • 27
0
votes
2 answers

mdl-stepper javascript and HTML

I copied and pasted the code I found here. When I try and step (press continue) it does not want to move, in fact it does nothing. I am using Smarty PHP and putting the JavaScript and CSS in the header area of the site - jQuery I am using I have…
RussellHarrower
  • 6,470
  • 21
  • 102
  • 204
0
votes
1 answer

How to focus an MDL TextField

What is the proper way to focus a material design lite TextField? This works: $("#myTextField").focus(); This does not work: document.getElementById('myTextField').parentNode.MaterialTextfield.focus(); However, this very similar code works to…
Lambert
  • 2,233
  • 5
  • 29
  • 44
0
votes
2 answers

How to update table view in html?

I have used this code for my project https://getmdl.io. Its simple and nicely designed front-end. And it loads some checkmarks for each row after the page loads. However I am having trouble updating the table view after I dynamically add some more…
0
votes
1 answer

Firebase v3 & Material Design Lite - Uncaught Error: No location for new iframe

I keep getting this error in the browser console. A few seconds later another error shows up, Uncaught Document body has not initialized. Wait to initialize Firebase until after the document is ready, and keeps repeating every few seconds. I…
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
0
votes
1 answer

Make the Drawer open when switching to small screen

I trying to use Material Design Lite and made a small interface. And now I face with a problem - I need to make the Drawer always open, when window loads and when window goes from large screen to small. By default, the Drawer always starts with…
s.spirit
  • 343
  • 1
  • 7
  • 19
0
votes
1 answer

Strange behavior when add mdl textfield component via javascript

The textfield created via javascript can not do floating text and don't have is-upgraded class. How to implement it correctly? Example code: var div_name = document.createElement("div"); div_name.setAttribute("class", "mdl-textfield…
0
votes
1 answer

Where is the animation demo for Material Design Lite?

Following the instructions of Material Design Lite's README, I have successfully build and served the local version of MDL website. I found that folder material-design-lite\dist\ was served. What I curious about is, there is a folder called…
Tan Jia Ming
  • 435
  • 1
  • 6
  • 22
0
votes
1 answer

Material Design Lite - misalignment of the textarea on Firefox

I'm using the Material Design Lite as framework in a project and after include some fields in a form, I noticed that the textarea element is aligned in all browsers except Firefox. I have opened an issue in Google MDL Github warning about the…
0
votes
1 answer

Materal Design elements inside Modaal Modal

We are using Material Design Lite inside our cordova app. As I don't know the status of MDL Dialogs from with in cordova, we have decide to use Modaal. When I open the modal, the MDL stlyes appear to work, but the input field doesn't float the…
tl8
  • 537
  • 5
  • 22
0
votes
1 answer

How to use Material Design Lite to target only desktop browser

I'm using MDL for a desktop-only web application and I do not need the content to be responsive. That is, even if the user resizes the browser window, I don't need to re-arrange the content. Neither it will ever be browsed on a mobile device. How do…
toomuchkevin
  • 161
  • 2
  • 7
0
votes
2 answers

Javascript App Windows Universal - Script Issue

I created a Website using material design lite: Scripts: .css files included in html: