Materialize CSS - Select Doesn't Seem to Render

Saat ini saya bekerja dengan CSS terwujud dan sepertinya saya tersangkut dengan bidang yang dipilih.

Saya menggunakan contoh yang disediakan dari situs mereka tetapi sayangnya itu ditampilkan dalam tampilan apa pun. Saya bertanya-tanya apakah orang lain mungkin bisa membantu.

Apa yang saya coba lakukan adalah membuat baris dengan 2 spacer ujung yang menyediakan bantalan - kemudian di dalam dua item baris bagian dalam harus ada input teks pencarian dan dropdown pilih pencarian.

Ini adalah contoh yang saya kerjakan: http://materializecss.com/forms.html

Terima kasih sebelumnya.

Berikut cuplikan kode yang dimaksud.

<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>

Karena mereka menimpa default browser, gaya pemilihan memerlukan Javascript untuk dijalankan. Anda perlu memasukkan file Javascript Materialize, dan kemudian memanggil

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

setelah Anda memuat file itu.

Desain selectfungsionalitas dalam mewujudkan CSS, menurut saya, merupakan alasan yang cukup bagus untuk tidak menggunakannya.

Anda harus menginisialisasi elemen pilih dengan material_select(), seperti yang disebutkan @ littleguy23. Jika tidak, kotak pilih bahkan tidak ditampilkan! Di aplikasi jQuery kuno, saya bisa menginisialisasinya di fungsi dokumen siap. Coba tebak, baik saya maupun banyak orang lain tidak menggunakan jQuery akhir-akhir ini, kami juga tidak menginisialisasi aplikasi kami di dokumen ready hook.

Pilihan yang dibuat secara dinamis . Bagaimana jika saya membuat pemilihan secara dinamis, seperti yang terjadi dalam kerangka kerja seperti Ember yang menghasilkan tampilan dengan cepat? Saya harus menambahkan logika di setiap tampilan untuk menginisialisasi kotak pilih setiap kali tampilan dibuat, atau menulis mixin tampilan untuk menanganinya untuk saya. Dan ini lebih buruk dari itu: ketika tampilan dibuat, dan dalam istilah Ember didInsertElementdisebut, pengikatan ke daftar opsi untuk kotak pilih mungkin belum diselesaikan, jadi saya perlu logika khusus mengamati daftar opsi untuk menunggu sampai itu diisi sebelum melakukan panggilan ke material_select. Jika opsi berubah, semudah mungkin, material_selecttidak tahu tentang itu dan tidak memperbarui dropdown. Saya dapat menelepon material_selectlagi ketika opsi berubah, tetapi tampaknya itu tidak melakukan apa-apa (diabaikan).

Dengan kata lain, tampaknya asumsi desain di balik terwujudnya kotak pilih CSS adalah bahwa semuanya ada saat pemuatan halaman, dan nilainya tidak pernah berubah.

Implementasi . Dari sudut pandang estetika, saya juga tidak mendukung cara CSS mengimplementasikan dropdowns-nya, yaitu membuat rangkaian elemen bayangan paralel di tempat lain di DOM. Memang, alternatif seperti select2 melakukan hal yang sama, dan mungkin tidak ada cara lain untuk mendapatkan beberapa efek visual (benarkah?). Bagi saya, ketika saya memeriksa sebuah elemen, saya ingin melihat elemen tersebut, bukan versi bayangan di tempat lain yang dibuat secara ajaib oleh seseorang.

Saat Ember meruntuhkan tampilan, saya tidak yakin CSS yang terwujud meruntuhkan elemen bayangan yang telah dibuatnya. Sebenarnya, saya akan sangat terkejut jika itu terjadi. Jika teori saya benar, saat tampilan dibuat dan dihancurkan, DOM Anda akan tercemar dengan lusinan set dropdown bayangan yang tidak terhubung ke apa pun. Ini tidak hanya berlaku untuk Ember tetapi kerangka kerja front-end OPA berbasis template / MVC lainnya.

Binding . Saya juga belum bisa menemukan cara mendapatkan nilai yang dipilih di kotak dialog untuk mengikat kembali ke sesuatu yang berguna dalam kerangka kerja seperti Ember yang memanggil kotak pilih melalui {{view 'Ember.Select' value=country}}antarmuka tipe. Dengan kata lain, ketika sesuatu dipilih, countrytidak diperbarui. Ini adalah pemecah kesepakatan.

Ombak . Ngomong-ngomong, masalah yang sama berlaku untuk efek "gelombang" pada tombol. Anda harus memulainya setiap kali tombol dibuat. Saya pribadi tidak peduli tentang efek gelombang, dan tidak mengerti tentang apa semua keributan itu, tetapi jika Anda memang menginginkan gelombang, ketahuilah bahwa Anda akan menghabiskan sebagian besar sisa hidup Anda dengan mengkhawatirkan cara melakukannya. menginisialisasi setiap tombol saat dibuat.

Saya menghargai usaha yang dilakukan oleh CSS yang terwujud, dan ada beberapa efek visual yang bagus di sana, tetapi itu terlalu besar dan memiliki terlalu banyak hal seperti di atas untuk menjadi sesuatu yang akan saya gunakan. Saya sekarang berencana untuk merobek CSS yang terwujud dari aplikasi saya dan kembali ke Bootstrap atau lapisan di atas Suit CSS. Alat Anda harus membuat hidup Anda lebih mudah, bukan lebih sulit.

@ littleguy23 Itu benar, tetapi Anda tidak ingin melakukannya untuk memilih banyak. Jadi hanya sedikit perubahan pada kode:

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

Ini berfungsi untuk saya, tidak ada jquery atau pilih pembungkus dengan kelas input, hanya material.js dan vanilla js ini:

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

Seperti yang Anda ketahui, saya mendapatkan gaya sebenarnya dari css dan bukan default browser.

Ini juga berfungsi: class = "browser-default"

Jika Anda menggunakan Angularjs, Anda dapat menggunakan plugin angular-materialize , yang menyediakan beberapa petunjuk praktis. Maka Anda tidak perlu menginisialisasi di js, cukup tambahkan material-selectke pilihan Anda:

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

Solusi yang berhasil untuk saya adalah dengan memanggil fungsi 'material_select' setelah data opsi dimuat. Jika Anda mencetak nilai OptionsList.find (). Count () ke konsol, nilai pertama adalah 0, kemudian beberapa milidetik kemudian daftar diisi dengan data.

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

Bagi saya tidak ada jawaban lain yang berhasil karena saya menggunakan versi terbaru dari MaterializeCSS dan Meteor dan ada ketidaksesuaian antara versi jquery, Meteor 1.1.10 menggunakan jquery 1.11 (mengganti ketergantungan ini tidak mudah dan mungkin akan merusak Meteor / Blaze) dan pengujian Materialize dengan jquery 2.2 berfungsi dengan baik. Lihat https://stackoverflow.com/a/34809976/2882279 untuk info lebih lanjut.

Ini adalah masalah yang diketahui dengan dropdown dan pilihan di terwujud 0.97.2 dan 0.97.3; untuk info lebih lanjut lihat https://github.com/Dogfalo/materialize/issues/2265 dan https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Saya menggunakan versi Sass dari MaterializeCSS di Meteor dan mengatasi masalah tersebut dengan menggunakan puisi: [email protected] di file paket meteor saya untuk memaksa versi lama. Dropdown sekarang berfungsi, jquery tua dan semuanya!

Panggil kode jquery css materialize hanya setelah html selesai dirender. Jadi Anda dapat memiliki pengontrol dan kemudian mengaktifkan layanan yang memanggil kode jquery di pengontrol. Ini akan membuat tombol pilih baik-baik saja. Bagaimanapun jika Anda mencoba menggunakan ngChange atau ngSubmit, ini mungkin tidak berfungsi karena gaya dinamis dari tag pemilihan.

Hanya ini yang berhasil untuk saya:

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

Saya menemukan diri saya dalam situasi di mana menggunakan solusi yang dipilih

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

untuk alasan apa pun ada kesalahan karena fungsi material_select () tidak dapat ditemukan. Tidak mungkin hanya mengatakan <select class="browser-default... Karena saya menggunakan kerangka kerja yang membuat formulir secara otomatis. Jadi solusi saya adalah menambahkan kelas menggunakan js (Jquery)

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

Pertama, pastikan Anda menginisialisasi di document.sudah seperti ini:

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

Kemudian, isi dengan data Anda sesuai keinginan Anda. Contoh saya:

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

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

Pastikan setelah Anda selesai dengan populasi, untuk memicu konten ini berubah seperti ini:

$("#mySelect").trigger('contentChanged');

Untuk browser default,

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

Atau solusi Jquery setelah t link perpustakaan Jquery dan file lokal / CDN Anda mewujudkan

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

Saya sangat suka kerangka ini, tapi apa yang harus ditampilkan: tidak ada ...

Hanya untuk menindaklanjuti ini karena jawaban teratas merekomendasikan untuk tidak menggunakan materializecss ... dalam versi materialize saat ini Anda tidak perlu lagi menginisialisasi pemilihan.