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

Material Design Lite Font Issue

I started to develope a new Website by using visual Studio as the development Environment. In the nuget packet Manager I added "Material Design Lite" to my Project. I just started to test some components and I got one Issue. Here is the Code of the…
Matthias Herrmann
  • 2,650
  • 5
  • 32
  • 66
0
votes
1 answer
0
votes
1 answer

MDL: Fixed header icon misplaced?

I'm trying out Material Design Lite to make a nice-looking webpage for a school project. I'm having an issue where the sandwich icon in the header is off-center for seemingly no reason. I copied and pasted the exact source from the fixed header…
TheGag96
  • 11
  • 2
0
votes
1 answer

Implementing a FAB button to the left of the header and hanging part below it

Trying to implement an Add Button to the left of my header in MDL. An Example can be seen on the getmdl.io site here https://getmdl.io/templates/text-only/index.html I have the following header defined.
Paul S Chapman
  • 832
  • 10
  • 37
0
votes
1 answer

Is Bootrap js and Material Design Lite js incompatible?

I am trying to implement bootstrap framework into my material design lite framework. Now, using bootstrap grid works good but when I tried using bootstrap collapsing panel it's not working. Is there a conflict between the js?
0
votes
1 answer

"has no exported member" Error in my MTL module

:grinning: Anyone to help me with that ? I have a class MDL : MaterialDesignLiteUpgradeElements.ts import {Directive, AfterViewInit} from 'angular2/core'; declare var componentHandler; @Directive({ selector: '[mdl]' }) export class MDL…
Slater
  • 817
  • 2
  • 10
  • 16
0
votes
1 answer

mdl-card expand to whole mdl-cell--x-col available

Whenever I create a mdl-card it is stuck at 330px wide, and even when I allocate classes mdl-cell mdl-cell--12-col or mdl-cell--8-col or anything, it just stays "mdl-cell--3-col" equivalent in width. How do I make the card use up the whole mdl-cell…
0
votes
1 answer

Unregister Material Disign Lite component in Backbone view

I'm using MDL with Backbone. How can i unregister components before removing view that contains any MDL component. To register components i'm using componentsHandler.upgradeDOM() function from MDL. But without…
0
votes
0 answers

Google Material Design mdl-layout__drawer

I have looked everywhere from Google's website to http://materialdesignblog.com/ and even on here, but I am not having any luck. I will note, that this is my first Google Material design/site. Up til now, I have been using bootstrap. I have a design…
0
votes
2 answers

responsive image in Material Design Lite

I'm porting a design made for Bootstrap into MDL (don't ask). I'm trying to find some equivalent mechanism for implementing bootstrap's .img-responsive functionality in MDL, but I keep coming up short. Is there a standard way to do this, or do I…
kolosy
  • 3,029
  • 3
  • 29
  • 48
0
votes
0 answers

How do I use an mdl badge to overlap an image?

I am creating a website but have come across a problem. I want to create a sort of expanding gallery that expands when you hover over a cover image. I want the cover image to have a material design lite badge that says the amount of images in that…
Bryson Shier
  • 89
  • 2
  • 8
0
votes
2 answers

Update Material Lite checkbox with Angular 2

I am trying to use Material Design Lite in Angular 2 and have trouble updating checkboxes after the state has changed. See the following Plunker example. When the user clicks on "All" to select all boxes, only the normal checkboxes update. I have…
0
votes
1 answer

Material Design Lite Menu dynamically ng-repeat

I am trying to achieve the menu features in MDL. It is working well statically as shown in the code below.
0
votes
2 answers

Material Design Lite white space between divs

I am designing a website with material design lite and i can;t figure out why there is a space between divs in the page content. AS i am adding a new div for any of my section, it creates a white space between the previous divs or the header. See…
pulkit
  • 85
  • 1
  • 9
0
votes
0 answers

Extend the width MDL input when typing

I have standard mdl textfield input
How to extend…
Sergino
  • 10,128
  • 30
  • 98
  • 159