0

We are using Material Design Lite inside our cordova app.

As I don't know the status of MDL Dialogs from with in cordova, we have decide to use Modaal.

When I open the modal, the MDL stlyes appear to work, but the input field doesn't float the label. I tried this on a normal page, and it appears to work fine.

I have attached the code that is used to show the modal as well as the modal HTML.

Note, the modal positioning is a separate issue.Input Label not floating

$('#add-card').modaal({
    overlay_opacity:0.5,
    overlay_close:false,
    hide_close:true,
    after_open: function(){
        componentHandler.upgradeDom();
    }
});

<div id="dialog-add-card" class="dialog">
     <h4>Add a New Card</h4>
     <p class="colour-text-light">Please enter your email address</p>
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" id="input-settings-add-card">
         <label class="mdl-textfield__label" for="input-settings-add-card">Email</label>
     </div>

     <div class="settings-button">
         <button id="button-dialog-add-card" class="mdl-button mdl-js-button mdl-button--raised colour-bg-action colour-text-white">Add</button>
     </div>
     <br />
     <div class="settings-button-small">
         <button id="button-dialog-add-card-cancel" class="mdl-button mdl-js-button colour-text-primary">Cancel</button>
     </div>

 </div>
tl8
  • 537
  • 5
  • 22
  • I tried MDL in one of my app too. ran into so many problems. I suggest you to use [bootstrap material](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html) or if you know angular then [angular material](https://material.angularjs.org/latest/) is the best for you. – Arpit Vasani May 07 '16 at 18:24

1 Answers1

0

I decided to use the polyfill and everything appears to work ok.

Changing it over wasn't too bad, but it would have been easier from the get go to use the polyfill.

tl8
  • 537
  • 5
  • 22