material-design-lite

NESTED Tabs in Material Design Lite - Nested Tabs don't COMPLETELY respond to click events?

由 北城以北 提交于 2019-12-11 06:59:50
问题 JSFiddle here. I am trying to use Nested Tabs in a web page where I am using Material Design Lite. So, please see in the JSFiddle linked or in the demo below, if you click the outer tab labelled ONE , you will see 4 nested tabs. The problem is with these nested tabs: The first of these nested tabs is Active by default, so its tab-header/title has a pink colored accent under it. When I click on the other nested tabs, this pink colored accent should be removed from the first nested tab and

Material Design Lite layout has changed after installing Iron:router

由 谁说我不能喝 提交于 2019-12-11 04:35:26
问题 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: 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: As you can see the design is now not 100% height; and if I resize to mobile resolution, it doesn

Using material design with VueJS

由 痴心易碎 提交于 2019-12-11 04:19:05
问题 I'm building a web app with VueJs and need a css framework to design something not from scratch! I found material-design-lite (www.getmdl.io) but i couldn't make it work properly with vue-router. My first page is correctly displayed but when i try to move to another page, i have this error : vue.esm.js?65d7:467 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. I thought it was because of the "Use MDL on

Different mdl-layout__drawer for large screen and small screen in MDL

由 社会主义新天地 提交于 2019-12-11 02:49:31
问题 I, am trying to create two different mdl-layout__drawer for small screen and large screen. As per the below code only on small screen the mdl-layout__drawer is showing it is not showing on large screen. <div class="mdl-layout__drawer mdl-layout--large-screen-only"> <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link21</a> <a class="mdl-navigation__link" href="">Link<

Using Tabs within Tab isn't working - Material Design Lite

由 笑着哭i 提交于 2019-12-11 00:24:34
问题 I want to make use of tabs layout within tabs layout. I am using Material Design lite which has already made classes for tabs therefore I am trying to make use of the same. The Tab Number 1 - Horizontal Tab is working individually without any problem. The Tab Number 2 - Vertical Tab is working individually without any problem. Now I tried to use tab number 2 within tab number 1. Tab number one's working remain the same but tab number 2 isn't working. Please take a look at this Plunker link :

How to encapsulate dynamically added elements in Angular 2?

由 北城余情 提交于 2019-12-10 17:56:03
问题 Trying to make MDL working with Angular2. With shadow DOM emulation angular encapsulates all css and html which it gains from code. But when I use componentHandler.upgradeElement() , it creates new elements with no encapsulation. What should I do to make it encapsulated too? 回答1: Adding this simple directive mdl element! import {Component, ElementRef } from 'angular2/core'; declare var componentHandler: any; @Component({ selector: '[mdl]', template: `<ng-content></ng-content>` }) export class

Why was material design lite(MDL) deprecated with MDC?

由 淺唱寂寞╮ 提交于 2019-12-10 02:04:01
问题 which of the 3 high-level goals did MDL fail: Production-ready components consumable in an a-la-carte fashion Best-in-class performance and adherence to the Material Design guidelines Seamless integration with other JS frameworks and libraries Or were there some other reasons behind deprecating MDL? 回答1: One of the core team members for MDC Web here. We have a migration guide if you're curious about switching from MDL to MDC Web. One thing we accomplished by moving to MDC Web was a new

Timer refreshes after browser page is reloaded - Javascript

由 匆匆过客 提交于 2019-12-08 10:25:10
问题 I built a countdown timer with the help of people from this platform a few days back. I thank them all for that. But I have run into another issue. When I refresh the page, the whole timer is reset and everything goes back to normal. I looked it up and realised I need to store seconds in something called the local storage of the browser. But how to implement it into my code is the problem. Similar issues like mine have different ways of solving this. I tried changing it to theirs but had the

MDL on dynamic websites downgrading

由 寵の児 提交于 2019-12-08 09:53:06
问题 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 DOM componentHandler.upgradeAllRegistered(); This works fine, but it leaks memory if the component MaterialLayout is alos created dynamically . With the "downgrading fix (#2009" the internal references are removed. The reason for the memory leak is that the component

google MDL textfield focus to change color

由 十年热恋 提交于 2019-12-08 02:44:42
问题 I just getting started this google material design lite. And i found this textfield floating when you r focusing in this label. the color is blue or navy or idk. the problem is, I changed the link color into this color indigo-pink <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> but there is no change for my textfield into an indigo color or a pink color when I focused on it. question is simple, how to change it? I did something with this, but still
订阅 material-design-lite