web-dev-qa-db-ja.com

マテリアライズCSS - 選択はレンダリングに思えない

私は現在CSSを具体化して作業しています、そしてそれは私が選択フィールドに引っ掛かるようになったようです。

私は彼らのサイトから提供された例を使用していますが、残念ながらそれはビューでまったくレンダリングしています。他の誰かが助けることができるかどうか私は思っていました。

私がやろうとしているのは、パディングを提供する2つの最後のスペーサーを持つ行を作成することです - それから内側の2つの行項目内に検索テキスト入力と検索選択ドロップダウンがあるはずです。

これは私が働いている例です： http://materializecss.com/forms.html

前もって感謝します。

これが問題のコードの断片です。

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>
javascripthtmlcssmaterialize
111
Ryan Rentfro

これらはブラウザのデフォルトをオーバーライドするため、選択スタイルを実行するにはJavascriptが必要です。 Materialise Javascriptファイルをインクルードしてから、呼び出す必要があります。

$(document).ready(function() {
    $('select').material_select();
});

そのファイルをロードした後。

238
jameslittle230

私の考えでは、CSSの実体化におけるselect機能の設計は、それを使用しないかなり良い理由です。

@ littleguy23が言及しているように、select要素をmaterial_select()で初期化する必要があります。そうでなければ、選択ボックスは表示されないでしょう。昔ながらのjQueryアプリでは、document ready関数で初期化できます。最近、私も他の多くの人もjQueryを使っていないのでしょうか、それともドキュメント準備フックでアプリを初期化するのでもありません。

動的に作成された選択。オンザフライでビューを生成するEmberのようなフレームワークで起こるように、動的に選択を作成している場合はどうなりますか？ビューが生成されるたびに選択ボックスを初期化するために各ビューにロジックを追加するか、それを処理するためのビューミックスインを作成する必要があります。さらに悪いことに、ビューが生成され、Ember用語でdidInsertElementが呼び出されたときには、選択ボックスのオプションリストへのバインディングはまだ解決されていない可能性があるので、オプションリストを観察する特別なロジックが必要ですmaterial_selectを呼び出す前に移入されています。オプションが変更された場合、material_selectはそのことを知らず、ドロップダウンを更新しません。オプションが変更されたときにmaterial_selectを再度呼び出すことができますが、それは何もしないように見えます（無視されます）。

言い換えれば、CSSの選択ボックスを具体化することの背後にある設計上の仮定は、それらがページロード時にそこにあり、それらの値は決して変わらないということです。

実装。審美的な観点からも、私はCSSの実体化がそのドロップダウンを実装する方法に賛成ではありません。それはDOMのどこかに並列のシャドウセットの要素を作成することです。確かに、select2のような別の方法でも同じことができますし、視覚効果のいくつかを達成する他の方法はないかもしれません（本当に？）。しかし、私には、要素を調べるときに、誰かが魔法のように作成した他の場所にあるシャドウバージョンではなく、その要素を見たいのです。

Emberがビューを破棄するとき、私はCSSのマテリアライズがそれが作成したシャドウ要素を破棄するのかどうかわかりません。実際には、そうだとしたら私はかなり驚きます。私の理論が正しければ、ビューが生成され破棄されると、DOMは何にも接続されていない何十ものシャドウドロップダウンのセットで汚染されることになります。これはEmberだけでなく、他のMVC /テンプレートベースのOPAフロントエンドフレームワークにも当てはまります。

バインディング。また、ダイアログボックスで選択した値を取得して{{view 'Ember.Select' value=country}}型のインターフェイスを介して選択ボックスを呼び出すEmberのようなフレームワークで有用なものにバインドする方法を理解することもできませんでした。つまり、何かが選択されても、countryは更新されません。これは契約を破る人です。

波。ところで、同じ問題がボタンの「波」効果にも当てはまります。ボタンが作成されるたびに初期化する必要があります。私は個人的には波の影響を気にせず、すべての煩わしさが何であるかを理解していませんが、波が欲しいのなら、残りの人生の大部分を費やすことに注意してください。ボタンが作成されたときにすべてのボタンを初期化します。

CSSを具体化することによる努力に感謝します、そしてそこにいくつかの素晴らしい視覚効果があります、しかしそれは大きすぎて、私が使うものになるには上のようなあまりに多くの落とし穴があります。私は今、私のアプリからCSSを具体化し、BootstrapかSuit CSSの上のレイヤーに戻ることを計画しています。あなたの道具はあなたの人生をより困難ではなく、より簡単にするはずです。

46
user663031

@ littleguy23それは正しいですが、あなたはそれをマルチセレクトにしたくないです。コードを少し変更するだけです。

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});
9
DFlores009

私のために働いた解決策は、オプションデータがロードされた後に 'material_select'関数を呼び出すことです。 OptionsList.find（）。count（）の値をコンソールに出力すると、最初の0であり、数ミリ秒後にリストにデータが入ります。

Template.[name].rendered = function() {
this.autorun(function() {
    var optionsCursor = OptionsList.find().count();
    if(optionsCursor > 0){
         $('select').material_select();
    }
});

;

3
Brandiqa

Angularjsを使用している場合は、 angular-materializeプラグイン を使用すると便利です。その後、jsで初期化する必要はありません。選択にmaterial-selectを追加するだけです。

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>
3
Artemis_134

これも動作します：class = "browser-default"

2
Abel

私にとっては、MaterialiseCSSとMeteorの最新バージョンを使用しており、jqueryバージョン間に互換性がないため、他の答えはどれもうまくいきませんでした。Meteor1.1.10はjquery 1.11を使用します（この依存を無効にするのは簡単ではなく、おそらくMeteor/Blazeを壊します）そして、jquery 2.2を使ったMaterialiseのテストはうまくいきます。詳細については、 https://stackoverflow.com/a/34809976/2882279 を参照してください。

これはドロップダウンの既知の問題で、マテリアライズ0.97.2および0.97.3で選択されています。詳細については、 https://github.com/Dogfalo/materialize/issues/2265 および https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 を参照してください。

私はMeteorでMaterialiseCSSのSassバージョンを使用していて、古いバージョンを強制するために私の流星パッケージファイルでpoetic：[email protected]を使用することによって問題を回避しました。今すぐドロップダウン、古いjqueryとすべてが機能します。

2
Mozfet

Htmlがレンダリングされた後にのみ、materialize css jqueryコードを呼び出します。だから、あなたはコントローラを持つことができますし、コントローラ内のjqueryコードを呼び出すサービスを起動します。これにより、選択ボタンが正しく表示されます。 ngChangeまたはngSubmitを使用しようとしても、selectタグの動的なスタイル設定が原因で機能しない場合があります。

1
Nitish Phanse

これだけが私のために働きました：

$(document).ready(function(){
    $('select').not('.disabled').formSelect();
});
1
Igor Shumichenko

これは私にとってはうまくいきました。入力クラスを持つjqueryやselectラッパーはなく、ちょうどmaterial.jsとこのVanilla jsです。

document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('select');
            var instances = M.FormSelect.init(elems);
        });

enter image description hereenter image description here

お分かりのように、私はmaterialize cssの実際のスタイルを取得しましたが、ブラウザのデフォルトではありません。

0
lomelisan

まず最初にdocumentでそれを初期化するようにしてください。

$(document).ready(function () {
    $('select').material_select();
});

次に、必要に応じてデータを入力します。私の例：

    function FillMySelect(myCustomData) {
       $("#mySelect").html('');

        $.each(myCustomData, function (key, value) {
           $("#mySelect").append("<option value='" + value.id+ "'>" + value.name + "</option>");
        });
}

次のように、contentChangedをトリガーするために、人口の処理が終わった後に確認してください。

$("#mySelect").trigger('contentChanged');
0
Alejandro Bastidas

デフォルトのブラウザの場合、

<head>
     select {
            display: inline !important;
         }
</head>

または、リンク後のJqueryソリューションJqueryライブラリとローカル/ CDNマテリアライズファイル

<script>
(function($){
  $(function(){
    // Plugin initialization
    $('select').not('.disabled').formSelect();
  }); 
})(jQuery); // end of jQuery name space

私はこのフレームワークが本当に好きですが、いったい何を表示するのですか：なし...

0
user2060451

選択したソリューションを使用するような状況になりました

$(document).ready(function() {
$('select').material_select();
});

なんらかの理由でmaterial_select（）関数が見つからなかったためにエラーが発生しました。私はフォームを自動レンダリングするフレームワークを使用していたので、<select class="browser-default...を言うことは不可能でした。そこで私の解決策はjsを使ってクラスを追加することでした（Jquery）

<script>
 $(document).ready(function() {
   $('select').attr("class", "browser-default")
});
0
unlockme