2016-05-05 9 views
0

当社のコードバアプリ内でMaterial Design Liteを使用しています。Modal Modal内のMateralデザインエレメント

私がcordodaのMDL Dialogsのステータスを知らないので、Modaalを使用することにしました。

モーダルを開くと、MDLスティールは機能しているように見えますが、入力フィールドはラベルを浮かべません。私はこれを通常のページで試したところ、正常に動作するように見えます。

モーダルHTMLとモーダルHTMLを表示するためのコードを添付しました。

モーダルの配置は別の問題です。 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> 
+0

私は私のアプリの一つでもMDLを試しました。非常に多くの問題に遭遇しました。 [bootstrap material](http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html)を使用するか、角度が分かり、[角度のある素材](https://素材)を使用することをお勧めします。 angularjs.org/latest/)があなたにとって最高です。 –

答えて

0

私はポリフィルを使用することを決定し、すべてが正常に動作するように見えます。

それを変えることはそれほど悪くはありませんでしたが、ポリフィルを使うのは簡単です。