Materialize CSS - Lựa chọn dường như không hiển thị

Tôi hiện đang làm việc với materialize CSS và có vẻ như tôi đã gặp khó khăn với các trường được chọn.

Tôi đang sử dụng ví dụ được cung cấp từ trang web của họ nhưng không may là nó đang hiển thị ở dạng xem. Tôi đã tự hỏi liệu ai đó có thể giúp đỡ.

Những gì tôi đang cố gắng làm là tạo một hàng có 2 dấu cách cuối cung cấp đệm - sau đó trong hai mục hàng bên trong sẽ có đầu vào văn bản tìm kiếm và trình đơn thả xuống chọn tìm kiếm.

Đây là ví dụ tôi đang làm việc từ: http://materializecss.com/forms.html

Cảm ơn bạn trước.

Đây là đoạn mã được đề cập.

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

Vì chúng ghi đè mặc định của trình duyệt nên kiểu chọn cần Javascript để chạy. Bạn cần bao gồm tệp Materialize Javascript, sau đó gọi

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

sau khi bạn đã tải tệp đó.

Theo tôi, thiết kế selectchức năng trong CSS cụ thể hóa là một lý do khá tốt để không sử dụng nó.

Bạn phải khởi tạo phần tử được chọn với material_select(), như @ littleguy23 đã đề cập. Nếu bạn không, hộp chọn thậm chí không được hiển thị! Trong một ứng dụng jQuery kiểu cũ, tôi có thể khởi tạo nó trong hàm sẵn sàng tài liệu. Đoán xem, tôi và nhiều người khác đang sử dụng jQuery những ngày này, cũng như chúng tôi không khởi chạy ứng dụng của mình trong tài liệu sẵn sàng hook.

Các lựa chọn được tạo động . Điều gì sẽ xảy ra nếu tôi đang tạo các lựa chọn động, chẳng hạn như xảy ra trong một khuôn khổ như Ember tạo ra các chế độ xem nhanh chóng? Tôi phải thêm logic trong mỗi chế độ xem để khởi tạo hộp chọn mỗi khi một chế độ xem được tạo hoặc viết một mixin chế độ xem để xử lý điều đó cho tôi. Và còn tệ hơn thế nữa: khi chế độ xem được tạo và theo thuật ngữ Ember didInsertElementđược gọi, ràng buộc với danh sách tùy chọn cho hộp chọn có thể chưa được giải quyết, vì vậy tôi cần logic đặc biệt quan sát danh sách tùy chọn để đợi cho đến khi nó được điền trước khi thực hiện cuộc gọi đến material_select. Nếu các tùy chọn thay đổi, như họ có thể dễ dàng, material_selectkhông có ý tưởng về điều đó và không cập nhật menu thả xuống. Tôi có thể gọi material_selectlại khi các tùy chọn thay đổi, nhưng có vẻ như không có gì (bị bỏ qua).

Nói cách khác, có vẻ như giả định thiết kế đằng sau việc hiện thực hóa các hộp chọn của CSS là chúng đều ở đó khi tải trang và giá trị của chúng không bao giờ thay đổi.

Thực hiện . Từ quan điểm thẩm mỹ, tôi cũng không ủng hộ cách thực hiện CSS thực hiện các trình đơn thả xuống của nó, đó là tạo ra một tập hợp các phần tử bóng song song ở một nơi khác trong DOM. Được cho là, các lựa chọn thay thế như select2 cũng làm được điều tương tự và có thể không có cách nào khác để đạt được một số hiệu ứng hình ảnh (thực sự?). Tuy nhiên, đối với tôi, khi tôi kiểm tra một phần tử, tôi muốn nhìn thấy phần tử đó, chứ không phải một phiên bản bóng mờ nào đó ở một nơi khác mà ai đó đã tạo ra một cách kỳ diệu.

Khi Ember giảm chế độ xem, tôi không chắc rằng việc hiện thực hóa CSS sẽ làm giảm các phần tử bóng mà nó đã tạo ra. Trên thực tế, tôi sẽ khá ngạc nhiên nếu nó xảy ra. Nếu lý thuyết của tôi là đúng, khi các lượt xem được tạo ra và bị chia nhỏ, DOM của bạn cuối cùng sẽ bị ô nhiễm với hàng tá tập hợp các trình đơn thả xuống bóng tối không được kết nối với bất kỳ thứ gì. Điều này không chỉ áp dụng cho Ember mà bất kỳ khung công tác front-end OPA dựa trên MVC / khuôn mẫu nào khác.

Ràng buộc . Tôi cũng không thể tìm ra cách lấy giá trị được chọn trong hộp thoại để liên kết trở lại với bất kỳ thứ gì hữu ích trong một khuôn khổ như Ember gọi các hộp chọn thông qua một {{view 'Ember.Select' value=country}}giao diện loại. Nói cách khác, khi một cái gì đó được chọn, countrysẽ không được cập nhật. Đây là một kẻ phá vỡ thỏa thuận.

Sóng . Nhân tiện, các vấn đề tương tự cũng áp dụng cho hiệu ứng "sóng" trên các nút. Bạn phải khởi tạo nó mỗi khi một nút được tạo. Cá nhân tôi không quan tâm đến hiệu ứng sóng, và không hiểu tất cả những rắc rối là gì, nhưng nếu bạn muốn có sóng, hãy lưu ý rằng bạn sẽ dành phần lớn thời gian còn lại của cuộc đời mình để lo lắng về cách khởi tạo mọi nút khi nó được tạo.

Tôi đánh giá cao nỗ lực của những người thực hiện CSS, và có một số hiệu ứng hình ảnh đẹp mắt ở đó, nhưng nó quá lớn và có quá nhiều điểm nhấn như trên nên không thể sử dụng được. Bây giờ tôi đang có kế hoạch tách CSS cụ thể hóa từ ứng dụng của mình và quay lại Bootstrap hoặc một lớp trên Suit CSS. Các công cụ của bạn sẽ giúp cuộc sống của bạn dễ dàng hơn chứ không phải khó khăn hơn.

@ littleguy23 Đúng vậy, nhưng bạn không muốn làm điều đó với nhiều lựa chọn. Vì vậy, chỉ cần một thay đổi nhỏ đối với mã:

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

Điều này phù hợp với tôi, không có jquery hoặc trình bao bọc chọn với lớp đầu vào, chỉ là material.js và js vani này:

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

Như bạn có thể nói, tôi có kiểu thực tế materialize css chứ không phải mặc định của trình duyệt.

Điều này cũng hoạt động: class = "browser-default"

Nếu đang sử dụng Angularjs, bạn có thể sử dụng plugin angle -materialize , plugin này cung cấp một số chỉ thị hữu ích. Sau đó, bạn không cần phải khởi tạo trong js, chỉ cần thêm material-selectvào lựa chọn của bạn:

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

Giải pháp phù hợp với tôi là gọi hàm 'material_select' sau khi đã tải xong dữ liệu tùy chọn. Nếu bạn in giá trị của OptionsList.find (). Count () ra bảng điều khiển thì đầu tiên là 0, sau đó vài mili giây sau danh sách sẽ được điền dữ liệu.

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

Đối với tôi, không có câu trả lời nào khác hoạt động vì tôi đang sử dụng phiên bản mới nhất của MaterializeCSS và Meteor và có sự không tương thích giữa các phiên bản jquery, Meteor 1.1.10 sử dụng jquery 1.11 (ghi đè phần phụ thuộc này không dễ dàng và có thể sẽ phá vỡ Meteor / Blaze) và thử nghiệm Materialize với jquery 2.2 hoạt động tốt. Xem https://stackoverflow.com/a/34809976/2882279 để biết thêm thông tin.

Đây là một vấn đề đã biết với danh sách thả xuống và lựa chọn hiện thực hóa 0,97.2 và 0,97.3; để biết thêm thông tin, hãy xem https://github.com/Dogfalo/materialize/issues/2265 và https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Tôi đang sử dụng phiên bản Sass của MaterializeCSS trong Meteor và đã khắc phục sự cố bằng cách sử dụng thơ: materialize-scss@1.97.1 trong tệp gói sao băng của mình để buộc phiên bản cũ. Các trình đơn thả xuống hiện hoạt động, jquery cũ và tất cả!

Chỉ gọi mã jquery css materialize sau khi html đã được hiển thị. Vì vậy, bạn có thể có một bộ điều khiển và sau đó kích hoạt một dịch vụ gọi mã jquery trong bộ điều khiển. Điều này sẽ hiển thị nút chọn ổn. Đã bao giờ nếu bạn cố sử dụng ngChange hoặc ngSubmit, nó có thể không hoạt động do kiểu động của thẻ select.

Chỉ điều này làm việc cho tôi:

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

Tôi thấy mình đang ở trong tình huống sử dụng giải pháp đã chọn

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

vì bất kỳ lý do gì đã tạo ra lỗi vì không thể tìm thấy hàm material_select (). Không thể chỉ nói <select class="browser-default... Bởi vì tôi đang sử dụng một khuôn khổ tự động hiển thị các biểu mẫu. Vì vậy, giải pháp của tôi là thêm lớp bằng cách sử dụng js (Jquery)

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

Trước tiên, hãy đảm bảo rằng bạn khởi tạo nó trong document. Đã như thế này:

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

Sau đó, điền nó vào dữ liệu của bạn theo cách bạn muốn. Ví dụ của tôi:

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

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

Đảm bảo rằng sau khi bạn hoàn thành với tập hợp, để kích hoạt nội dung này Đã thay đổi như thế này:

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

Đối với trình duyệt mặc định,

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

Hoặc giải pháp Jquery sau liên kết t Thư viện Jquery và các tệp cục bộ / CDN của bạn hiện thực hóa

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

Tôi thực sự thích khung này, nhưng cái quái gì để có màn hình: không ...

Chỉ cần theo dõi điều này vì câu trả lời hàng đầu khuyên bạn không nên sử dụng materializecss ... trong phiên bản hiện tại của materialize, bạn không cần phải khởi tạo các lựa chọn nữa.