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
1 answer

Material Design Lite - HTML Select Styling Recommendation

MDL has no HTML Select component. The MDL Menu component can be fashioned with text to operate sort of like a drop down but renders a long list such that the main page must be scrolled down to select items. What is the best way to offer distinct…
Ronnie Royston
  • 16,778
  • 6
  • 77
  • 91
0
votes
1 answer

Add MDL tab programmatically

I have a material design lite page using a tabbed layout that starts with a single tab. I have a menu action that adds an additional tab. JavaScript code adds the required tag and content to the tab bar in the
and appends the related…
Mike
  • 391
  • 4
  • 11
0
votes
1 answer

MDL on dynamic websites downgrading

We have a old large ajax based GUI adapted to MDL. The whole page content is build dynamically (from xml description). componentHandler.downgradeElements( /all old notes/ ; remove all old notes form DOM add new page content to…
hr_117
  • 9,589
  • 1
  • 18
  • 23
0
votes
1 answer

How to switch MDL theme by click?

Is there any way to change material design theme colors just by button click? Lets say I want my app to support personalization so every user can pick predefined theme color palette. Something similar to this:…
Sergino
  • 10,128
  • 30
  • 98
  • 159
0
votes
1 answer

Import css into style/theme

I'm looking in to replacing the Polymer Elements add-on with the Material Designs Lite (MDL) css/js library so that I can design my layouts with more native components for Vaadin. I've found accessing internal nodes for Polymer Elements to be a…
fakataha
  • 785
  • 6
  • 31
0
votes
1 answer

Fetch table row data as per the selected checkbox

I am using Material Design Lite to create a table and I am inserting rows dynamically using php. The material design lite has provided checkboxes for each row. Now, I want to use the selected row's data on a button click. Does anyone have any idea…
Sachin Parashar
  • 1,067
  • 2
  • 18
  • 28
0
votes
1 answer

Can't select anything in - Material Design Lite

I've been working on a web app and I've realized I can select anything, use links, or even use the Material Design Lite slider. I haven't messed with the z-index or anything so I don't think it's that. I've also used an HTML validator and besides…
l0xluzzy
  • 51
  • 1
  • 7
0
votes
1 answer

Google MDL Waterfall header not shrinking on scroll and scroll bar on right of body

DataThe following shows the header and main body of a Google MDL Page. I'm trying to use a waterfall header - where the header shrinks as you scroll. With the page below what I am getting is that the header does not scroll and I get a scroll bar on…
Paul S Chapman
  • 832
  • 10
  • 37
0
votes
1 answer

How can I use JavaScript with mdl-layout--fixed-tabs

I looked at numerous examples of mdl-layout--fixed-tabs usage. I can't find any example of using mdl-layout--fixed-tabs with JavaScript. My goal is to make different REST backend calls depending on active tab.
Sharma
  • 37
  • 1
  • 6
0
votes
1 answer

Masonry layout using MDL

I am trying to create dynamic tiles using the mdl-grid and mdl-cell , but the cell is stretching to the maximum height of the column in that row . To see the difference Here is the example from Angular material design . Here the tiles are displayed…
Bujji
  • 1,717
  • 10
  • 41
  • 66
0
votes
2 answers

Angular 2 - Add CSS class from Component event

I'm using Angular 2 with TypeScript and MDL and have the following simple component. Basically it's an input with the button, and then a collection of spans underneath it. So you enter some "tag", then click the button, and the collection is…
Ihor Deyneka
  • 1,326
  • 1
  • 19
  • 37
0
votes
1 answer

Best way to deal with mis-aligned header and main due to scrollbar

I am working on a site with a header at the top and a main content area. The header does not scroll but the main area does. This means that I have a scrollbar to the right of the main area but not to right of the header and they do not line up: In…
Roaders
  • 4,373
  • 8
  • 50
  • 71
0
votes
1 answer

Using Material Design with Angular 2

I am trying to use MDL in my Angular 2 app. Basically, I have a dashboard with several tabs. However, when I render the tabs, it breaks. Following is my code: dashboard.html
kosta
  • 4,302
  • 10
  • 50
  • 104
0
votes
1 answer

TinyMCE dropdowns not working in MDL modal

I'm trying to run TinyMCE in Material Design Lite modal, but drop-downs for selecting Font family and font size not working: JSFiddle example: https://jsfiddle.net/m11q7dzj/ CSS: .mdl-dialog{ width: 500px; height: 500px; } .editable{ width:…
GoR
  • 121
  • 2
  • 10
0
votes
1 answer

How do I change the favicon in google's "web starter kit?"

I replaced all of the files in images/touch with my own logo, and also replaced favicon.ico in the main directory of my project, but the favicon still displays as the default asterisk that comes with web starter kit. I tried refreshing the cache of…
ajbeckner
  • 253
  • 2
  • 8
1 2 3
…
42 43