material-design-lite

I am trying to use Google's Material Design Lite with ReactJS. I am using Spinner Loading & Text Field Component of MDL library. But, when I switch routes with React Router, the animation does not take place & when I refresh the page, it works fine. I think, this is probably because MDL components are not getting upgraded. Then, I am trying to use componentHandler.upgradeDom() , but Console throws an error, app.js:27160 Uncaught TypeError: Cannot read property 'upgradeDom' of undefined . Here is the code, var React = require('react'); var ReactDOM = require('react-dom'); var PropTypes = React

I am trying to get Material Design Lite text field to work and I have an issue where the bottom colored line has a slight 3-4 px gap between the gray starting line. Any MDL text Field example I plug into my page I get the same result, what can locally be triggering the issue? Also I am using react.js on the frontend. I am on 1.2.1 of material design lite. Here is an image: Here is my code: <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input className="mdl-textfield__input" type="text"/> <label className="mdl-textfield__label" htmlFor="nameField"> Your name <

I am facing an issue regarding the mdl-textfield 's behavior On the below plnkr, follow the steps: click on "groups working" click on "copy" on one item look at the very end new textfield appeared with the ngModel associated (angular.copy) but the behavior of the textfield is strange, even if there is a value, the label is not floating but if you click in the textfield, it floats as expected. If you modify the field the behavior remains, but if you quit it without any modification label comes back with overlay. http://plnkr.co/edit/MUI2iBslIH9jd4fgEQPL?p=preview ngView content <div data-ng

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 timer not showing when the page is refreshed and the button enabled when it must be disabled. Please

I'm using a material design lite checkbox and I'm trying to check or uncheck the element using JavaScript. I tried this: document.getElementById("checkbox-1").checked = true; That do not work. I tried the same approach with jQuery: $("#checkbox-1").prop('checked',true); That did not work either. Any help would be appreciated. Garbee Currently, this component in 1.0.0 has a bug where it is not exposed as a widget. This has been fixed. Currently in master and in a 1.0.1 patch in a few days, it will be available to everyone in a stable build. This is the proper method to handle it that will work

I am unable to use .animate method of jQuery with Google's Material Design Lite(MDL). I have used MDL to make navigation bar, but smooth scrolling was not working. Simple jQuery code is this: $(function(){ $('a.smooth').click(function(){ console.log("SMOOTH BEGIN"); var speed = 1000; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); console.log("SMOOTH END"); }); }); And simple html code is this: <!-- Navigation (this is included header) --> <nav class=

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 the contents of <router-outlet> . I thought this would solve the issue. I added an ngAfterViewInit and