material-design-lite

I use Firefox Version 40.0.3/Chrome 45.0.2454.85 and i have the following problem: The placeholder/label overlaps the content, if i use jQuery. Javascript: $("#eventAddKurzLB").val("test"); HTML: <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="eventAddKurzLB" /> <label class="mdl-textfield__label" for="eventAddKurzLB">Kurzbezeichnung:</label> <span class="mdl-textfield__error">Es sind nur Zahlen, Buchstaben und Bindestriche erlaubt!</span> </div> Example: Live-Example: https://jsfiddle.net/vutLb9ut/2/ The problem

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? When you add an element after dom is already loaded you'll need to 'upgrade' the element. To do so dom-wide, try this snippet componentHandler.upgradeDom(); exact issue from the mdlhut I have a similar problem. It seems that in

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 have no luck in it. the HTML: <form action="#"> <div class="mdl-textfield mdl-js-textfield mdl-textfield-

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-lite/1.3.0/material.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs

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 componentHandler.upgradeElements(node) Where the node variable is the element (and children) you wish to upgrade. 来源： https://stackoverflow.com/questions