smallseo.info

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.

MDL Button Ripple is Inconsistent

I'm using the Material Design Lite CSS/JS "template" Google just released to sprinkle some Material Design into my Angular app and I've noticed the button-ripple effect is pretty inconsistent.

Sometimes on my main app view it never loads up the button ripples despite working in other views, and then on other views it only works the first one or two instances. For example,

Main view has one ng-repeating list of buttons:

<li ng-repeat="item in items">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">{{item.name}}</a>
</li> <!-- ripple sometimes works totally fine !-->

Alternate views have a couple of static buttons followed by an ng-repeat list of buttons:

<li id="non-repeating-list-item-1">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">Hello</a>
</li> <!-- ripple always works totally fine !-->
<li id="non-repeating-list-item-2">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">Hello</a>
</li> <!-- ripple always works totally fine !-->

<li ng-repeat="item in items">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">{{item.name}}</a>
</li> <!-- ripple never works !-->

Is this bad practice or something? Is there any reason for this to happen?


Source: (StackOverflow)

How to make icon move to the left on MDL header?

I tried setting the margin,padding to move the back-arrow icon to the left of the header but failed. How should I make this correct?

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 <header class="mdl-layout__header">
  <div class="mdl-layout__header-row">
      <!--back arrow-->
      <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);">
       <i class="material-icons">arrow_back</i>
      </button>

     <!--Title-->
     <span class="mdl-layout-title">Settings</span>
  </div>

 <!-- Tabs -->
 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
  <a rel='nofollow' href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a>
  <a rel='nofollow' href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a>
</div>


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)

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>
    <thead>
        <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>
    </thead>
    <tbody>
        <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>
        </tr>
    </tbody>
</table>

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)

HTML: Equal HTML, different View

I have a very very weird bug I am debugging right now.

I am trying out Material Design Lite: http://www.getmdl.io/components/index.html#layout-section

But whenever I just COPY/PASTE the "Fixed Header" example from their official CodePen (http://codepen.io/anon/pen/WvaKjK) it looks different in my browser:

Look at the Icon in the Top Left

And this is the whole HTML that is used:

<html>

<head>
  <!-- Material Design Lite -->
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
  <link rel="stylesheet" rel='nofollow' href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" rel='nofollow' href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Title</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" rel='nofollow' href="">Link</a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" rel='nofollow' href="">Link</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content">
        <!-- Your content goes here -->
      </div>
    </main>
  </div>
</body>

</html>

If you compare the two headers, you see that the icon in the top left is not in place. Well the queston arises for the why.

Because I use the same code on my machine, which makes the icon appear out of place, but whenever I copy/paste the code from my browser by f.e. cmd+U to jsfiddle or codepen, I get the Icon placed right.

See here:

http://codepen.io/anon/pen/LVgBzZ

It's not a browser problem, since the same problem appears also in Firefox, Chrome, Chrome Canary and also Android Chrome. I uploaded the same HTML here, which is displayed wrongly:

http://temp.leavingblue.com/5.html

I ran the code on my local machine on windows (wamp) and on a linux virtual machine (homestead).

TL;DR:

Same HTML looks fine in Official getmdl.io site, codepen, jsfiddle, but looks weird when I recreate it on my own HTML file.

How to reproduce the error

Go to

  1. http://temp.leavingblue.com/5.html,
  2. Cmd + U
  3. Copy/Paste all to Codepen.io
  4. Look at differences

Can anyone reproduce the error? Also has anyone an explanation for this behaviour?


Source: (StackOverflow)

Material Design Lite: Is Installation on Wordpress possible?

Random and probably dumb question-can Material-Design-Lite blog template be fully installed on Wordpress? Downloaded the full template from http://www.getmdl.io/templates/blog/index.html and wondering how to use the entire file....

Thanks!


Source: (StackOverflow)

Using Material Design Lite with AngularJS

I'm running into trouble trying to use Material Design Lite and AngularJS. After googling for a bit, I found another stack overflow post regarding a similar issue: Material Design Lite Integration with AngularJS

I am trying to load data into a table by pushing data from an ajax request into a model. From there the view is updated by AngularJS. Since the table uses Material Design Lite's javascript to add in functionality to select multiple entries, the new table entries do not seem to be updated with the proper classes/attributes.

As prescribed by others in the other stack overflow question, we need to run componentHandler.upgradeAllRegistered();. This does not seem to upgrade the elements correctly.

Here is a JSFiddle of an example: https://jsfiddle.net/chaseme/50n21fao/1/

Does anyone have any insight on this? Thanks.


Source: (StackOverflow)

How to use Modal Pop up with Material Design Lite?

I recently started using the latest Desktop version of Google Material Design Lite, I figured it doesn't have a modal pop up and the team has not yet implemented it for the next release.

I have tried to include bootstrap model into it, but thats not working infect seems pretty messed, I believe with the classes/styles clashing with each others.

Any Idea what will work good as an replacement ??

Thanks for your help.


Source: (StackOverflow)

Material Design Lite layout has changed after installing Iron:router

I created a meteor project and added krazyeom:material-design-lite package. Then I created 2 simple html files, one that contains

<head>...</head>

and another that contains

<body>...</body>

My design looks something like this:

Layout with full-height menu

After I added the iron:router and only replaced <body> with <template name="layout"> and </body> with </template>.

Router.route('/', {name: 'layout'});

It looks like this:

Broken layout with non full-height menu

As you can see the design is now not 100% height; and if I resize to mobile resolution, it doesn't appear the 3 lines icon to show the sidebar.

What could be the problem ?


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)

Parsing html code with jQuery

I'm using the new material-design-lite (mdl) on my website. I'm also loading in dynamic content using mustache.js.

Now, the newly created elements need to be registered with using the upgradeElement function for mdl to know of them and apply the javascript to them. On their website they have some sample code to do this:

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

However, I am using jQuery and I'm not entirely sure how I should parse the whole template I get from mustache.js and register each component correctly. This is what I've tried:

var filledTemplate = '
    <div class="mdl-card mdl-shadow--2dp">
       <div class="mdl-card__title">
           <h2 class="mdl-card__title-text">Title</h2>
       </div>
       <div class="mdl-card__supporting-text">
               <p>A simple paragraph with below some radio buttons</p>
               <p>
                   <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_0">
                       <input type="radio" id="input_0" class="mdl-radio__button" name="options" value="radio1" />
                       <span class="mdl-radio__label">Radio button 1</span>
                   </label>
               </p>
               <p>
                   <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="input_1">
                       <input type="radio" id="input_1" class="mdl-radio__button" name="options" value="radio2" />
                       <span class="mdl-radio__label">Radio button 2</span>
                   </label>
               </p>
       </div>
       <div class="mdl-card__actions mdl-card--border">
           <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
               Send
           </a>
       </div>
   </div>';

var html = $.parseHTML(filledTemplate);
$(html).find(".mdl-js-button").each(function(){
    componentHandler.upgradeElement($(this));
});

The filledTemplate is just to give a clear idea of the stuff it can contain. I need to bind all input's, textareas, sliders, radios, checkboxes and a button. In the example above you can see a simple card-layout from mdl, with two radio boxes and a button.

I tried to get the componentHandler to upgrade the button-element first, but mdl returns element.getAttribute is not a function, so I guess I'm just giving the wrong value to .upgradeElement().

What am I doing wrong here?

Here is a codepen as an example: http://codepen.io/anon/pen/JdByGZ


Source: (StackOverflow)

MDL card height customization

So I wanted to make a card appear the same way its supposed to be done in the Material design spec

Short video demo

I have managed to do it using jquery on a simple red square (See first snippet) I simply give the desired element 0 height & width, and then animate the height & width with jquery to how big I want it to be.

The problem with any of the MDL cards is, I can't get the height to anything smaller than 200. You can check out my second snippet and see what happens when I try to set it to 150px.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Card</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
    	<p id="Box"></p>
        <button id="Start">Start</button>
        <button id="Reset">Reset</button>
        <script>
        $(document).ready(function() {
            
            $("#Start").click(function(){
                $('#Box').animate({height: "150px", width: "150px"},{duration: 1000});
            });

             $("#Reset").click(function(){
                $('#Box').animate({height: "0px", width: "0px"},{duration: 1000});
            });
            
        });
        </script>
        <style>
        #Box{
        	width: 0px;
        	height: 0px;
        	background-color: red;
            box-shadow: -3px 1px 30px 0px rgba(50,50,50,0.25);
        }
        </style>
    </body>
</html>

$(document).ready(function(){
            
 $('.mdl-card').animate({height: "150px", width: "0px"},{duration: 1000});  
  $("#Start").click(function(){
    $('.mdl-card').animate({height: "150px", width: "150px"},{duration: 1000});
  });

  $("#Reset").click(function(){
    $('.mdl-card').animate({height: "0px", width: "0px"},{duration: 1000});
  });            
               
               
});
<!doctype html>
<html>
    <head>
 	<link rel="stylesheet" rel='nofollow' href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" rel='nofollow' href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
       <div class="mdl-card mdl-shadow--6dp"></div>
        <button id="Start">Start</button>
        <button id="Reset">Reset</button>
    </body>
   <style>
  .mdl-card{
  margin: 5px 5px;
  width: 0px;
  height: 0px;
}</style>
</html>

Any help would be really appreciated, maybe theres a different way to do this with jquery?


Source: (StackOverflow)

Centered form with material design lite

I am looking for an easy to get a login form centered on the screen using Google's Material Design Lite library.

I've been through a number of iterations and this is the best I've come up with:

<div class="mdl-cell--12-col mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>

    <div class="mdl-grid mdl-cell--4-col">

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="text" id="username" />
            <label class="mdl-textfield__label" for="username">Username</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">
            <input class="mdl-textfield__input" type="password" id="password" />
            <label class="mdl-textfield__label" for="password">Password</label>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>
</div>

Is there a better way of achieving a centered form on all screen sizes?

The divs with &nbsp; feel really yucky!


Source: (StackOverflow)