material-design-lite

multiple select option using material design lite

空扰寡人 提交于 2020-07-03 08:52:26
问题 I'm really curious to know if there is a way to create a multiple select option in a dropdown with material design lite, I've search everywhere and I've only been able to implement it using materializecss, need to know if its possible with material design lite 回答1: It's 13/05/2020. Still nothing for MDL. Depending on what you use, slim select could be useful. I ended up re-designing to exclude the multiselect dropdown myself. 来源: https://stackoverflow.com/questions/47524544/multiple-select

Material Design Lite: How to programatically reset a floating label input text

ぐ巨炮叔叔 提交于 2020-01-06 02:44:16
问题 I am currently building a Single Page App with knockout.js and Material Design Lite. I have a form which allow creating (and persisting) a new entity. The first time the form is used, the floating label input works correctly. But after that, if I reset the values of the fields through knockout observables (i.e. set the field values to "" in order to be able enter the values for another new entity) the floating label doesn't reset: the floating label still floats above the field, while it

mdl-js-ripple-effect not working on IPad IOS safari 13.1(beta)

自闭症网瘾萝莉.ら 提交于 2020-01-05 14:18:49
问题 I am testing an application on Ipad with the iOS safari v 13.1 (beta). All buttons in the application use "mdl-js-ripple-effect" is not working. there are around 1260+ instances and 400+ file using this class. 回答1: Look here: https://github.com/google/material-design-lite/issues/5281 ... MDL is no longer maintained. Please update your systems as you can to Material Components for Web. 来源: https://stackoverflow.com/questions/57858598/mdl-js-ripple-effect-not-working-on-ipad-ios-safari-13-1beta

Fetching the value of a mdl-textfield

泪湿孤枕 提交于 2020-01-05 09:06:24
问题 I have the following mdl-textfield: <div class="mdl-textfield mdl-js-textfield" id="step_condition"> <textarea class="mdl-textfield__input" type="text" rows="25"> </textarea> <label class="mdl-textfield__label" for="step_json">Step condition</label> </div> To set the value of the field I use: $("#step_condition").get(0).MaterialTextfield.change('100'); My questions are: is this the correct way of setting the value of the field? is there a similar way to fetch the value of the field? I know I

Angular2 with Material Design Lite

冷暖自知 提交于 2020-01-03 16:50:17
问题 I have added the following bit of code in my angular2 app to help MDL re-register the components when moving around the app... ngAfterViewInit() { componentHandler.upgradeDom(); } And although it seems to be working ok (as expected) I am getting the following error... (16,5): error TS2304: Cannot find name 'componentHandler'. I'm still quite new to angular2 and typescript but I guess I need to import something so my code knows what componentHandler is(even though it must know what it is

Material design lite inputs in Ember.js app loses it design after route transition

*爱你&永不变心* 提交于 2020-01-03 02:01:05
问题 I am trying to use Material design lite with an Ember.js application and got the form working somehow. However, when the user navigates from one page to another page containing the form or inputs, the inputs do not seem to behave as expected. For an example here, when the page loads first time to home page, input works fine but when we switch between sign-in and home pages, inputs fallbacks to basic form and material design animation is lost. Not sure if this issue is related to Ember.js or

Using Angular2 With Material Design Lite

柔情痞子 提交于 2020-01-01 05:31:29
问题 I am learning Angular2 but I have problem about using Angular2 with MDL. Why MDL navigation bar is not working with Angular2? When I use Navigation bar with header and drawer, drawer is not working so I cannot click on it, I cannot see drawer's icon. There is another problem: textfields also is not working correctly. I want to use mdl-textfield--expandable (Search) but when I click on this search field it is not expanding. However, without Angular2 it is working fine. UPDATE it is my app.html

Material Design Lite Integration with AngularJS

非 Y 不嫁゛ 提交于 2019-12-31 08:09:06
问题 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. 回答1: Emjay's second answer worked for me. You can additionally reduce boilerplate by tossing the upgradeAllRegistered method into Angular's run block: angular.module(

MDL: Set Switch state to “on” via JS

*爱你&永不变心* 提交于 2019-12-24 17:28:08
问题 I can access my switch via let iSwitch = document.getElementById('interestedSwitch'); I looked at github and found the method MaterialSwitch.on() , but iSwitch.MaterialSwitch.on(); is undefined. iSwitch.checked = true; does not help either. I am using AngularJS, if this could be a source of the problem. 回答1: Assuming interestedSwitch is the input element with class mdl-switch__input you need to access the parent element. This should be the label with mdl-js-switch (with MaterialSwitch

Google MDL - Creating card in jquery shows only text - no background or border

你说的曾经没有我的故事 提交于 2019-12-24 12:23:15
问题 I have the following code which creates an MDL Card on the fly var resultsHolder = $('#resultsHolder'); var gridHolder = $('<div>',{ 'class' : 'mdl-grid' }); var card = $('<div>',{ 'class' : 'mdl-card.mdl-shadow--2dp data-display' }); var title = $('<div>',{'class' : 'mdl-card__title'}); var h4 = $('<h4>'); var supportingText = $('<div>',{'class' : 'mdl-card__supporting-text'}); var supportingPara = $('<div>',{'class' : 'projectDesc'}); h4.append($('#projectName').val()); title.append(h4);