material-design-lite

问题 When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text" . <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sample5"> <label class="mdl-textfield__label" for="sample5">Text lines...</label> </div> 回答1: I haven't

问题 I installed material design lite module through npm, but I want to change it with other colors and preferably with colors that are not included in Material Design Color Pallete. I read here Here on GitHub how to do it. But it doesn't work for me, when I try to change color I get white/black color look. I have in my main scss @import 'colors'; @import '../../../node_modules/material-design-lite/src/material-design-lite'; ` And my _colors.scss contains: $golden: #c6a259; $brown: #240000; $color

问题 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 回答1: componentHandler.upgradeElements(node) Where

问题 For MDL tables, is there an attribute to make the table responsive? 回答1: 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:

问题 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

问题 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? 回答1: Check if the componentHandler is loaded, and

问题 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

问题 I've come across an interaction between the Angular2 router and the Material Design Lite (MDL) animations. If I create an <input> element in a component that is rendered by the <router-outlet> component in Angular2, MDL doesn't properly handle my interactions with it (doesn't show focus animation, doesn't clear placeholder text, etc). If, on the other hand, the <input> appears outside the <router-outlet> , there is no problem. It seems like it has something to do with the dynamic nature of

问题 I am using material design lite for a form. The issue that I'm facing is that when required validation is set on a checkbox, it seems to be hiding the error message as soon as it gets rendered. Please note that the actual validation is working as expected, just the error message is not being displayed. Here is a codepen with this issue - http://codepen.io/anon/pen/LVqPzm Here is the HTML used: <html> <head> <!-- Material Design Lite --> <script src="https://storage.googleapis.com/code.getmdl

问题 I am having problems in bind a Knockout array with Material Design Lite checkbox. Basically it doesn't show the checkbox checked. How can that be fixed? var ViewModel = function() { this.uniqueTabsNames = ko.observableArray(['one', 'two', 'three']); } ko.applyBindings(new ViewModel()); <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design