128

私は現在マテリアライズ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>

4

14 に答える 14

253

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

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

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

于 2015-02-01T00:34:14.923 に答える
9

@ littleguy23それは正しいですが、複数選択したくありません。したがって、コードを少し変更します。

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});
于 2015-06-11T01:22:25.373 に答える
3

私にとってうまくいった解決策は、オプション データが読み込まれた後に「material_select」関数を呼び出すことです。OptionsList.find().count() の値をコンソールに出力すると、最初は 0 で、数ミリ秒後にリストにデータが入力されます。

Template.[name].rendered = function() {
    this.autorun(function() {
        var optionsCursor = OptionsList.find().count();
        if(optionsCursor > 0)
        {
            $('select').material_select();
        }
    });
};
于 2016-03-10T22:15:16.300 に答える
2

私はMaterializeCSSとMeteorの最新バージョンを使用しており、jqueryバージョン間に非互換性があるため、他の答えはどれもうまくいきません.Meteor 1.1.10はjquery 1.11を使用します（この依存関係をオーバーライドするのは簡単ではなく、おそらくMeteor / Blazeを壊します） jquery 2.2でマテリアライズをテストすると正常に動作します。詳細については 、 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 で MaterializeCSS の Sass バージョンを使用しており、meteor パッケージ ファイルで poetic:materialize-scss@1.97.1 を使用して古いバージョンを強制することで問題を回避しました。ドロップダウンが機能するようになりました。古い jquery などすべてです。

于 2016-01-15T11:40:04.117 に答える
0

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

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

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

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

私はこのフレームワークが本当に好きですが、一体何を持っているのですか display:none...

于 2019-08-03T16:16:51.077 に答える
-5

一番上の回答ではmaterializecssを使用しないことを推奨しているため、これをフォローアップするために...現在のバージョンのmaterializeでは、選択を初期化する必要がなくなりました。

于 2015-03-10T00:21:36.797 に答える