Materal Design Elemente in Modaal Modal

Question

Wir verwenden Material Design Lite in unserer Cordova App.

Da ich den Status der MDL-Dialoge von mit in Cordova nicht kenne, haben wir uns entschieden, Modaal zu verwenden.

Wenn ich das Modal öffne, scheinen die MDL-Stlyes zu funktionieren, aber das Eingabefeld schwebt nicht auf dem Etikett. Ich habe das auf einer normalen Seite versucht, und es scheint gut zu funktionieren.

Ich habe den Code angehängt, der verwendet wird, um das modale sowie das modale HTML anzuzeigen.

Hinweis, die modale Positionierung ist ein separates Problem.

$('#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> 

Answer 1

Ich beschloss, die polyfill und alles zu verwenden, scheint ok zu arbeiten.

Es war nicht so schlimm, es zu ändern, aber es wäre einfacher gewesen, das Polyfill zu verwenden.