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

Which Material Design framework can I use for supporting Nested Tabs in my website?

I am building a web page which is going to have Nested Tabs. And I want it to have Material Design. I had been using Material Design Lite but based on my experience, as well as this, this and this link, I don't think that Material Design Lite…
Shy
  • 542
  • 8
  • 20
0
votes
1 answer

Button click: hidden list

I have a problem on Material Design Lite. I'm trying to add a "share" button on my article. When I click, I would like some icons to appear like facebook, twitter. I would like no backgroud. If you try my code it's working. My only problem is a…
SimonGdO
  • 3
  • 1
0
votes
0 answers

button in an mdl template in cakephp

I am creating a cakephp blog essentially from the blog tutorial(in the official cakephp cookbook for version 3.4) and using a template from mdl(material design lite). this is the one : this one I have two questions here... 1.I need to use the custom…
0
votes
1 answer

How to disable ripple effect on getmdl's toggle?

I'm using getmdl.io component library, and I can't find a way to disable ripple effect on toggle component. My HTML code looks like this:
0
votes
1 answer

Angular UI Router - Partial GETs 404 Not Found

I'm currently working on a project using Material Design Lite and Angular JS. I'm having a problem setting up a simple route with angular UI router. Here are links in the index's navbar.
0
votes
1 answer

Center text align of 'MDL - Side Drawer Menu' not working properly.(getmdl.io)

I'm currently using a built-in navigation layout of Material Design Lite. I'm giving the description link so that you can understand: https://getmdl.io/components/index.html#layout-section. I'm trying to make center-aligned title of mdl side drawer…
S M Iftakhairul
  • 1,120
  • 2
  • 19
  • 42
0
votes
0 answers

Angular 2 and Material Design Lite fail to update inputs

I'm having a problem in my app when using ngModel on the form with components of Material Design Lite. I was warned that I had to create a directive, as shown in the sample code. import {Directive, AfterViewChecked, AfterViewInit} from…
Aderbal Nunes
  • 400
  • 1
  • 6
  • 18
0
votes
2 answers

CSS clear left every 3rd element

I feel like peter griffin in that CSS meme, messing around with CSS. Can someone please explain how I can get rows of 3 and why the code below isn't working? Here is a jsfiddle example to give more context
d-_-b
  • 21,536
  • 40
  • 150
  • 256
0
votes
1 answer

in Rails how do I change what styles are imported based on the URL

In Rails 4.2 I want to transition from using "Materialize" to style the views to using "Material Design Lite" The Materialize styles require me to have @import 'materialize'; in application.scss and the MDL styles require me to have @import…
Toby 1 Kenobi
  • 4,717
  • 2
  • 29
  • 43
0
votes
1 answer

mdl-menu list not opening if its id is set dynamically via data binding

I am using knockoutJS for data binding. I am looping through a list of comments and using mdl-menu for each comment to provide admin options on comment like edit and delete and also setting each comment's menu icon's id according to corresponding…
0
votes
2 answers

Is it safe to use setTimeout in production code?

I have an angular2 component using Material Design Lite but the checkbox (probably others too) elements are not properly rendered at the first load of the component, while if I interact with the checkboxes, the mdl style is correctly applied. In my…
koninos
  • 4,969
  • 5
  • 28
  • 47
0
votes
1 answer

mdl-menu not working properly with max-width

If I set the max-width property for mdl-layout__header-row class, the dropdowns are not working properly, they are misaligned. Remove the max-width property and everything works fine. Code:
RAGHU RAMAN
  • 537
  • 4
  • 16
0
votes
1 answer

Angular2 cli import error

I am trying to use mdl-stepper in my Angular2 project. In my HTML:
  • Step 2
  • Thinker
    • 5,326
    • 13
    • 61
    • 137
    0
    votes
    1 answer

    MDL mdl-layout-spacer forcing content to next line

    This is a pretty basic Material Design Lite question, but this has been driving me crazy. In the following example from the MDL examples website, the div with class mdl-layout-spacer nicely positions the elements after it to the right of the…
    jeffery_the_wind
    • 17,048
    • 34
    • 98
    • 160
    0
    votes
    1 answer

    how to append a TextField properly with MaterialDesign Lite?

    I try to append a new text with floating label with jQuery, but my appended textfield are not animated. How can I make it animated ? Here is my jQuery Code: $('body').on('keypress', '.stepcity', function(e){ let keyCode = e.keyCode ||…