material-design-lite

I have three tabs on the page. <!-- Tabs --> <div class="mdl-layout__tab-bar"> <a href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a> <a href="#plots-data-tab" class="mdl-layout__tab">Plots data</a> <a href="#report-tab" class="mdl-layout__tab">Report</a> </div> I need to re-draw plots when Plots tab is selected. I've tried to onclick="redraw_plots();" to the Plots tab, but function is called too fast before tab is activated. Any way to get an event when this tab activates? Thank you. It's happen because element inline event are the first event to be executed. To Execute after MDL

For MDL tables , is there an attribute to make the table responsive? To make a material design lite table responsive, you can use the same principle of the .table-responsive class of bootstrap.The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference. If you don't want to include the entire bootstrap library, include the following CSS in your project: .table-responsive { min-height: .01%; overflow-x: auto; } @media screen and (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow

Disclaimer: I don't want to start any fight against Google Fanboys . I'm just asking because I didn't find a direct answer to my question and maybe someone who already started working with it (or any googledev) can give advice. Google recently announced Material Design Lite 1.0 and the project has been starred over 9k times on Github in a few days. I read some posts [ 1 , 2 ] comparing MDL vs Twitter Bootstrap and I don't understand why anyone outside Google's headquarters should consider start working with it. As they said: “We challenged ourselves to create a visual language for our users

<header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Navigation --> <nav class="mdl-navigation"> <a class="mdl-navigation__link is-active" href="/">link</a> <a class="mdl-navigation__link is-active" href="/">link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <nav class="mdl-navigation"> <a class="mdl-navigation__link is-active" href="/">link</a> <a class="mdl-navigation__link is-active" href="/">link</a> </nav> </div> <!-- Colored FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">

Even though I add "mdl-layout--small-screen-only" class on the drawer, the hamburger image still appears on large 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" href="">Link</a> <a class="mdl-navigation__link"

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. This worked pretty well for me (using fuel as an example): <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <select class="mdl-textfield__input" id="octane" name="octane"> <option></option> <option value="85">85</option> <option value="87

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. mpint Emjay's second answer worked for me. You can additionally reduce boilerplate by tossing the upgradeAllRegistered method into Angular's run block: angular.module('app', []) .run(function ($rootScope,$timeout) { $rootScope.$on('$viewContentLoaded', ()=> { $timeout((