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

Build a custom Material Design Lite Palette

How can i build a customized MDL with the colors that not are in this tool: https://getmdl.io/customize/index.html I whant those colors: Primary-color: red 400 (#EF5350) Secondary-color: amber 500 (#FFC107) That form part of color's app that I'm…
Alex cueto
  • 172
  • 3
  • 16
0
votes
0 answers

How to apply material design lite to asp .net form buttons?

This question is not duplicate to this one. I am trying to materialize the button (ASP.NET web form control). Button is materialized but unable to get ripple effect. Actually this works for normal button (HTML control). HTML Snippet
0
votes
2 answers

Vue.js For loop is not rendering content

I am building a web application using vue.js, vue-resource, vue-mdl and google material design lite. JS compilation is performed using webpack through laravel elixir. In this app I have to render a table row for each object from an array returned…
Kenneth_H
  • 141
  • 2
  • 13
0
votes
2 answers

Material design light. Grid system unexpected behavior

First of all a picture: This is a screen from getmdl.io. I can not understand this behavior. I've sad, that i want exactly 3 column in a row with width of each one equals to 1/3 of row width. But in some screen resolutions width of column equals to…
user3272018
  • 2,309
  • 5
  • 26
  • 48
0
votes
2 answers

Getting value from mdl radio button

In the following code why doesn't the radio report the correct value when checked via its variable name? var $myRadio = $('input[type=radio][name=options]:checked'); $('#button').click(() => { // this works …
charsi
  • 2,917
  • 22
  • 40
0
votes
1 answer

Material Design lite tooltip positioning

I'm using material design lite library but I have an issue. When i reduce the window and sometimes the tooltip isn't positioning properly and is also taking 2 lines instead of one. Html
zaarr78
  • 467
  • 9
  • 21
0
votes
2 answers

Register model changes to MDL input elements

When integrating MDL with a framework, the framework will set the values for inputs directly, but the changes won't get noticed by the MDL libraries, as those are likely bound to click and change events. For example, if I have:
Stephen
  • 1,603
  • 16
  • 19
0
votes
0 answers

CSS/JavaScript — Make Bootstrap's input boxes look and function like MDL's text field

I'm cuztomizing Bootstrap with their given source code and I came here to ask how to make Bootstrap's input boxes to look and function just like the Material Design Lite's textfield component. So why not use MDL then? The two frameworks are great…
0
votes
0 answers

Load Material Design Lite after Angular has finished loading

I'm developing a web application with Angular and MDL. I googled a lot and I realized that when the page is completely loaded and rendered by angular I should run componentHandler.upgradeDom() to let MDL render the page. However I really don't know…
cventr
  • 186
  • 1
  • 12
0
votes
0 answers

Dynamic Element Angularjs

I'm using a combination of Angular, jQuery and Material Design Lite to develop a dynamic input element insertion by clicking a button in a form and static input in my form (both are working fine). Actually my problem is: the animations of Material…
0
votes
1 answer
0
votes
1 answer

My icon not floating right

IMAGE:icon not floating to right and its meant to be perfect circle but its cut I am trying to push the icon to the right of the header but all to no avail.This is the html:
A.Lang
  • 59
  • 1
  • 8
0
votes
1 answer

MDL Navigation layout in Google Apps script

I am trying to use MDL navigation layout sample code from here: https://getmdl.io/components/index.html#layout-section in Sidebar html code, see https://developers.google.com/apps-script/guides/dialogs . It does not render correctly, probably…
0
votes
1 answer

ReactJS and MDL menu not showing

Trying to make an app that uses Material Design Lite. However, I've encountered a problem where MDL menu just won't open. Check this pen I also have tried following this article, which describes that React and MDL don't play along nicely and it is…
Enki
  • 3
  • 2
0
votes
1 answer

Resize content when drawer is open in MDL

I'm building a website based on MDL. What I'm trying to achieve is that the drawer doesn't open over the content, but open next to it. I managed to disable the obfuscator and modify the top value. However, the way I was going to do this is anytime…
km6
  • 2,191
  • 2
  • 15
  • 18