Material Design Lite Components in HTML/CSS/JS Material Design Lite a front-end template that helps you build fast, modern mobile web apps.

creating a slider with editable number field in material design lite

Is there any way to have a slider and next to it an editable field with it's current value?

I am using MDL and not polymer, because its light weight and should be distributed with locally run software.

Source: (StackOverflow)

Using Material Design Lite with React

I am trying to use MDL on an existing project that uses React, and I am running into several issues. Things seem fine on the first load, although there are many warning messages:

Warning: ReactMount: Root element has been removed from its original container. New container:

This happens pretty much for every DOM element that has a class recognized by MDL (examples: mdl-layout, mdl-layout__content, etc.) and it happens on any DOM changes.

Further, when changing routes, there is an "Invariation Violation" error:

Uncaught Error: Invariant Violation: findComponentRoot(..., . Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser)...

Does this mean that MDL and React are pretty much incompatible?

Update: The issue disappears if the element with class="mdl-js-layout" is not the topmost element in the reactjs render function. Once I wrapped that element, all is good.

Source: (StackOverflow)

Material Design Lite + React - Issues with Tooltips

Recently, I have been integrating Material Design Lite into my React web application. For the most part, everything has worked out just fine, but currently I am having some issues with React's event handling, which doesn't seem to play nice with some MDL components.

In particular, I have a DOM element with an onClick handler, which works perfectly fine, until a MDL Tooltip is added, which causes the onClick to no longer fire. I've tried pretty much every variation possible (put the tooltip somewhere else in the DOM, attach the onClick handler to a container div which has the tooltip as a child, etc), and I just can't seem to get it to work.

Here's a JSBin that demonstrates the issue (I've also included an example that uses jQuery to bind a click handler to the element after the component mounts, which actually DOES work):


I have some theories as to why this isn't working, but I don't know enough about either React or MDL to verify any of them.

I believe it has something to do with the way React handles events, and for some reason, MDL seems to be clashing with it. From the documentation:

React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops

This makes it seem like MDL might be messing with React's internal mapping of events, which causes my click on the element to become a no-op. But again, this is just a complete guess.

Does anyone have any ideas about this? I would prefer not to have to manually bind an event listener in componentDidMount for each of my components that use MDL Tooltips (like I did in the example JSBin I provided), but that's the solution I'm going with for now.

Also, since I was not sure if this was an MDL specific bug, I opted to post this question here instead of on their issues page. If anyone thinks I should post it there as well, let me know, and I can do that.


Source: (StackOverflow)

How to format select box with Material Design Lite?

I've read through the Components listing and read through the CSS provided, but I don't see any mention of select boxes - just regular inputs; text, radio, checkbox, textarea, etc.

How do you use Material Design Lite with a select box? Using the classes for a regular text input gets you halfway there, but it is certainly not correct.

Source: (StackOverflow)

How can I make header scrollable for smaller screens in MDL?

With MDL 1.0(http://www.getmdl.io/) I'm trying to make a header scrollable on bigger & smaller screens. But it is scrollable only on bigger screens(like on my pc), but not on smaller screens.

Here's the html:

	<link rel="stylesheet" rel='nofollow' href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.teal-light_green.min.css" />
	<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
	<link rel="stylesheet" rel='nofollow' href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header mdl-layout__header--scroll">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a rel='nofollow' href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a rel='nofollow' href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a rel='nofollow' href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
      <a rel='nofollow' href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
      <a rel='nofollow' href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
      <a rel='nofollow' href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  <main class="mdl-layout__content">
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content"><br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!</div>
    <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content"><!-- Your content goes here --></div>
    <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
    <section class="mdl-layout__tab-panel" id="scroll-tab-4">
      <div class="page-content"><!-- Your content goes here --></div>
    <section class="mdl-layout__tab-panel" id="scroll-tab-5">
      <div class="page-content"><!-- Your content goes here --></div>
    <section class="mdl-layout__tab-panel" id="scroll-tab-6">
      <div class="page-content"><!-- Your content goes here --></div>

As you see, the header is scrollable but only for bigger screens (like on PC). But if you make the window smaller, or just run it on a smaller screen, the header is fixed and not scrollable. Also if I remove the mdl-layout--fixed-header from the outer div (main div), the header disappears on smaller screens.

Any idea how to make header scrollable on both bigger and smaller screens?

Source: (StackOverflow)

Material Design Lite navigation

How can I make submenu items in the navigation?

<!-- Navigation -->
  <nav class="mdl-navigation">
    <a class="mdl-navigation__link" rel='nofollow' href="">Link</a>
    <a class="mdl-navigation__link" rel='nofollow' href="">Link</a>
    <a class="mdl-navigation__link" rel='nofollow' href="">Link</a>
    <a class="mdl-navigation__link" rel='nofollow' href="">Link</a>

I can't use <ul> <li> with it. What is the correct class?

Source: (StackOverflow)

Open navigation drawer on swipe (Material Design Lite)

I'm using Material Design Lite to create a UI for an app in a web view however I have come across a problem where I can't deploy the navigation drawer on swipe.

I am using this jquery code to recognise the swipe event

  $(function() {      
      $("#test").swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
          $(this).text("Event Triggered" );  

From here I'm not sure how to open up the navigation drawer. I would prefer to have the entire screen "swipeable" especially the left edge. How can I go about opening the navigation bar when this swipe handler is triggered?

Source: (StackOverflow)

Rerendering MDL drawer menu makes drawer button disappear

I'm integrating MDL into a React application.

I've just tried to make a component out of a Fixed Header layout (http://www.getmdl.io/components/index.html#layout-section) and noticed that if I hardcode the layout in the html it works as expected. However if i generate that html at runtime with JS the hamburger icon is missing.

What should I do to fix that problem?

Source: (StackOverflow)

How to solely upgrade an element and all its children

Using componentHandler.upgradeAllRegistered(); upgrades all matching elements within the DOM, which is an unnecessary performance cost in my case:

When I insert an element in the DOM, anything from parent to root does not need to be re-upgraded. Only the element and its children are newly created elements and need re-initialization.

How can I achieve this functionality?

Some insides: https://github.com/google/material-design-lite/issues/871

Source: (StackOverflow)

How to hide the icon menu on large screens?

I'm new at this and let me know how to hide the menu icon , and it adds automatically without being prompted, i want only to display on small screens. Sorry for the bad English.

Thank You.

Source: (StackOverflow)

What is the correct way to make a Material Design Lite table 100% width?

I'm looking into using Google's Material Design Lite framework and I'm wondering how I can make a table span a 100% width of it's containing element:

Take this table:

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Unit price</th>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>

How can I make this MDL table span a 100% of it's container?

I have set up this JSFiddle with the table example taken from docs.

Source: (StackOverflow)

Material Design Lite JS not applied to dynamically loaded html file

I want to unify the navigation layout for my website, so I created a separate html file that holds the code for the navigation. I use a JS to load the file dynamically:

$("#navigation").load("/navigation/navigation.html", function() {

The problem is that the material.min.js does not get executed for the dynamically loaded components inside this html and I lose some crucial functionality. How do I fix that?

Source: (StackOverflow)

How to scroll to top using JQuery and Material-Design-Lite

I've been using Material-Design-Lite in my website and I'm also using JQuery to display a button that scrolls to top. But they are not working together. With Material-Design-Lite installed, the button does nothing on click.

<div class='back-to-top'>
  <a class='hvr-icon-spin' rel='nofollow' href='#'/>

  $(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        } else {
      $(&#39;#back-to-top&#39;).hide().click(function() {
        $(&#39;html, body&#39;).animate({scrollTop:0}, 600);
        return false;

Is there any alternative way to solve it? I've tried not using JQyery, but it also didn't work. The website I'm trying to use it is here.

Source: (StackOverflow)

Material Design Lite: How to display Table on Mobile?

I've got a big table that displays a lot of data.

On Destop it looks quite ok, but on mobile it just cuts of the data and I am not able to access what is on the table, like this:

Desktop Version of Table

Table on Desktop

Mobile Version of Table

enter image description here

Is there any way to make Tables accessible on Mobile? Or is the only way to just keep the data on a couple of rows only? And separate the columns on different cards?

(And yes, I know that this is not the best use for a card, I am still experimenting with mdl).

Thank you a lot.

Source: (StackOverflow)

How to make an Angular Material table responsive

I have a simple table with numerous columns, and I would like the columns to shrink automatically when sizing the browser window. The table-responsive works with Bootstrap, but I am looking for something similar for Angular Material. I am trying to avoid having 2 table definitions, and do not really want to do this myself in CSS. Is there a standard way in Angular Material for this?

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" flex>
        <th class="mdl-data-table__cell--non-numeric">Date</th>
        <th class="mdl-data-table__cell--non-numeric">Time</th>
        <th class="mdl-data-table__cell--non-numeric">Park</th>
        <th class="mdl-data-table__cell--non-numeric">Home Team</th>
        <th class="mdl-data-table__cell--non-numeric">Away Team</th>
        <th class="mdl-data-table__cell--non-numeric">Win/Loss</th>
        <tr ng-repeat="game in games">
            <td class="mdl-data-table__cell--non-numeric">{{game.GameDate | SLS_Date}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.GameTime | SLS_Time:'HH:mm' }}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.VenueName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.HomeTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.AwayTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.WinLoss}}</td>

Note, I have used the Material Design Lite table here, as Angular Material does not have a table today. Same problem, including the use of flex and grids.

I guess the new Material world does not like tables, so best option is to change the layout to not use tables.

Source: (StackOverflow)