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

Accordion and Dialog components for Material Design Lite

Are there any accordion and modal dialog components available and actually work that are compatible with my environment of: Google's Material Design Lite version 1.06 Facebook's ReactJS 0.14.2 Microsoft's TypeScript and Visual Studio 2015 (for…
Lambert
  • 2,233
  • 5
  • 29
  • 44
0
votes
1 answer

Material Design Lite Layout breaks on second upgradeDom()

I'm using Riot.js and I have a root element into which I render a different layout for login box and for the actual app. MDL version is 1.0.6. I wasn't allowed to post images but screenshots can be found here. It's a bit complicated to setup this in…
RanzQ
  • 11
  • 2
0
votes
2 answers

How to set global variable to material design lite library in typescript

I'm using Googles "Material Design Lite" library with Microsoft's TypeScript inside of Visual Studio 2015. I have a script tag in my Index.html page as so:
Lambert
  • 2,233
  • 5
  • 29
  • 44
0
votes
2 answers

Handling button mdl-js styling with dynamic innerHTML change

Changing
0
votes
1 answer

Dynamically add items to an mdl menu

I want to dynamically add menu items to an mdl menu. However, I have not figured out how to register the new items with mdl so that they work properly. Here is a codepen showing the different behavior. Notably, the dynamic item does not have a…
Erik
  • 6,470
  • 5
  • 36
  • 37
0
votes
1 answer

Theming Material Light

I've been trying to port my website https://lavanoid.github.io to a more "Google Standard" but it's been really frustrating (thanks to Google, not well documenting stuff, as far as I can see :/). I've been trying to theme this template:…
Jack
  • 45
  • 5
0
votes
1 answer

How to change length of span on show of edit controllers

My div with controllers overflow span with text inside td. Can I make force span to margin from controllers div on their show? Here what I need: And here what I have: Here is my code: .controllers { position: absolute; right: 0px; …
dniHze
  • 2,162
  • 16
  • 22
0
votes
0 answers

Material Design Lite fixed tabs menu title not alignied?

When trying to use the example of the menu layout with Fixed Tabs, with Googl'es MDL: http://www.getmdl.io/components/index.html#layout-section/layout . The "title", next to the hamburger menu, isnt aligned horizontally, like it is in the…
0
votes
1 answer

The mdl-data-table--selectable table can't change the line-height in CSS?

The mdl-data-table--selectable table can't change the line-height in CSS. So how to make rows shorter?
orchardc
  • 5
  • 1
0
votes
1 answer

Material Design Lite ignores different Font types

I've recently switched to Material Design Lite from Polymer. I'm trying to understand what's best for what I need to do. I've started with the demo toolbar on the MDL website (GETMDL) and I after copying it I tried to change the title font, however…
SimoPiersi
  • 43
  • 1
  • 6
0
votes
1 answer

Highlighting entire table row with Material Design Lite checkbox

I'm trying to highlight an entire table row that has the material design lite look. I'm using check boxes to highlight the row and it works fine without the MDL look but as soon as I dress up a check box with MDL, it only highlights the current…
SS113
  • 548
  • 1
  • 11
  • 21
0
votes
2 answers

Not able to understand the relationship between MDL Layout and MDL Grid components

From the MDL website: Layout: "The MDL Layout component is a comprehensive approach to page layout that uses MDL development tenets, allows for efficient use of MDL components, and automatically adapts to different browsers, screen sizes, and…
logicalguy
  • 29
  • 5
0
votes
1 answer

Adding icon button in tab material design lite

Is it possible to add icon button in tab in Material Design Lite? The tab is only a tag so I don't know to include a icon button within.
Mr_Thorynque
  • 1,749
  • 1
  • 20
  • 31
0
votes
1 answer

In react-router, when I change a router, Material design lite(MDL) doesn't work

https://www.youtube.com/watch?v=byUS_CUBELk&feature=youtu.be I uploaded the video for my problem. When you watch the 23~26sec section, you can watch the material design is working! However, when you watch the 27~30 sec section, you can watch the…
0
votes
2 answers

How do I upgrade a MDL table from JavaScript?

I want to: Generate a table that has tickboxes. I generate a table's code from JS, then I change the innerHTML of a parent node to include it. If I call componentHandler.upgradeElement on the , I get this: As you can see, there is also the order…
tensojka
  • 302
  • 1
  • 5
  • 20