EzDev.org

material-design-lite

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


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">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

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)

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:

<html>
<head>
	<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">
</head>
<body>
<!-- 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>
    </div>
    <!-- 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>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
  </div>
  <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>
    <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-4">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-5">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-6">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
  </main>
</div>
</body>
</html>

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)

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)

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(..., .0.2.0.1.1.0.0.0.0): 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: 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 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='#'/>
</div>

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

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)

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)

Material design lite inputs in Ember.js app loses it design after route transition

I am trying to use Material design lite with an Ember.js application and got the form working somehow. However, when the user navigates from one page to another page containing the form or inputs, the inputs do not seem to behave as expected. For an example here, when the page loads first time to home page, input works fine but when we switch between sign-in and home pages, inputs fallbacks to basic form and material design animation is lost.

Not sure if this issue is related to Ember.js or Material design but any help would be highly appreciated.


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>
  </nav>

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


Source: (StackOverflow)

Material Design Lite Integration with AngularJS

I am aware of Angular Material which helps implement Material Design specification for use in Angular single-page applications.

I'm however taking a look at Material Design Lite alternative to integrate with my Angular project. I will like to know the best way to go about integrating Material Design Lite with and AngularJS app.


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)

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() {
   $.getScript('/material.min.js');
});

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)

Material design lite Indeterminate progress bar is not taking whole width applied to it

I am using Indeterminate loading in one of our material lite page. The problem is that it is not taking whole length applied to it.

I am using div with class 'mdl-grid' and inside that I am using another div with class 'mdl-cell mdl-cell--12-col'. in this inner div I am actually using progress bar div.

I am using following HTML code:

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
</div>

The output of which is like: using-12Col-div

As you can see, it's not taking whole length of the div i.e. 100% So, I tried with two 6 column grids and tried to add progress bar component into those like,

<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>

But still it's taking same width.

The codepen for the same can be found here.

Any help about using inderminate progress bar to take whole length assigned to it, will be much appreciated.


Source: (StackOverflow)

How can a MDL menu be made to stay open after clicking in it?

I need to place a input in a MDL menu. The problem is when I click into the input or anything in the menu it closes the menu. How can this be made to work?

This is an example of the problem.

   <button id="demo-menu-lower-right"
            class="mdl-button mdl-js-button mdl-button--icon">
      <i class="material-icons">more_vert</i>
    </button>

    <div class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
        for="demo-menu-lower-right">
        <form action="#">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" id="sample3" />
                <label class="mdl-textfield__label" for="sample3">Text...</label>
            </div>
        </form>
    </div>

Source: (StackOverflow)