Stack Overflow
Stack Overflow

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

p5.js element on canvas positions

I'm coding a p5.js game and i have to draw a button, an input and a p html elements over my canvas. I wanna have all this elements centered relative to the canvas. I tried this solution without success: var gameCanvas = createCanvas(600,…
frankjust
  • 19
  • 9
0
votes
1 answer

How to Edit the text of a MDL Button with JQuery

I am currently working on a project which uses MDL Lite and is basically a controller for a device I am building. The webpage has buttons, all defined as standard MDL Buttons with Ripple. I need to make the button's text change when something…
DarkHorse
  • 963
  • 1
  • 10
  • 28
0
votes
1 answer

Grey out div from toggle switch

I am trying to to grey out a div based on whether a toggle is active(checked) or not. The js seems to be triggering when I select the toggle though the div isn't being faded out Slim Template - @products.each do |product| …
Boss Nass
  • 3,384
  • 9
  • 48
  • 90
0
votes
3 answers

angular 2 + MDL blank pages

I'm trying to develop a web app with Angular 2 and Material Design Lite. But all the html pages comming from binded components and using MDL are not displayed. After hours of searches on the internet, I found out that it is quite a common problem…
Fab
  • 668
  • 9
  • 24
0
votes
2 answers

Check and add class for tabs Angular2

I have MDL styled tabs in my Angular2 app. And what I need is to check whether a tab has class and if it doesn't then to add that class on click. My component.html:
Alexandr Belov
  • 1,804
  • 9
  • 30
  • 43
0
votes
1 answer

Material Design Lite Tabs not working in Angular2

Trying to use MDL Tabs in my project. But can't get the desired tabs styling. Component code:
//***** mdl container
Alexandr Belov
  • 1,804
  • 9
  • 30
  • 43
0
votes
1 answer

Backbone collection sort Material datatable component

I am building an app using MarionetteJS with Material Lite. I have an issue when sorting the collection in a datatable component. ListView js is a Marionette.CompositeView instance Here is the code: listView.js events: { 'click .sort':…
rvpanoz
  • 75
  • 2
  • 9
0
votes
1 answer

Material design lite: mdl-layout__tab-bar and page scroll

I have a mdl-layout__tab-bar with a few links in the navigation bar. I want these links to trigger a page scroll to sections of the page. I have tried the following solutions: # the targeted section starts with the
Raphael
  • 1,709
  • 2
  • 17
  • 27
0
votes
1 answer

How to make material design lite card scrollable only on X with overflow of imgs?

I have this page and i tried to make the card with title Online scrollable in the supporting-text area , but it fails with all kinds of tries , i tried many CSS like overflow:auto; and overflow:scroll; but nothing worked ! this is codepen link to…
Maxmya
  • 11
  • 1
  • 5
0
votes
2 answers

How to show the error message of a mdl-textfield programmatically?

I'd like to show the MDL error message on a quantity text field when the user tries to send a form leaving the field empty. The field is like:
Michele DC
  • 109
  • 1
  • 11
0
votes
2 answers

Where can I find more components to the MDL than on the main website

I was looking to make my page better, and I coundn't find many examples of how can I add more complex components to the MDL design. I found single component "mdl-select" and that's it. Is there any page or gallery of components, even paid, that I…
xdeveloper
  • 125
  • 2
  • 9
0
votes
1 answer

Material Design Lite tool tip issue in Angular 2

I've researched and read everything I can find on the issue I'm having, but I can't seem to get any of the proposed solutions to work. I'm building an application using Angular 2 and MDL that takes customer orders and displays them on MDL cards. …
Patrick Cox
  • 33
  • 5
0
votes
2 answers

How do I specify fixed width for material card titles?

I am trying to give two material cards a fixed title height, regardless of how much content they have. I would like the height of the cards to be 15px but for some reason they won't adjust.
taylorsabell
  • 664
  • 5
  • 15
0
votes
1 answer

Select input from getmdl-select with Vue 2.0

I was trying out getmdl-select with Vue2.0. in the view, I got it correct and working as expected, but it is not changing the model associated. Here is the code:
Saurabh
  • 71,488
  • 40
  • 181
  • 244
0
votes
1 answer

MDL tooltips causing grey areas of UI

I am using a simple implementation of a button on a simple MDL website with material design lite. When i click the button, areas of the UI go grey until the browser repaints that area.
1 2 3
…
42 43