Materializuj CSS - wybierz opcję Wydaje się nie renderować

Obecnie pracuję z materializacją CSS i wygląda na to, że mam problemy z wybranymi polami.

Używam przykładu dostarczonego z ich witryny, ale niestety renderuje się on w widoku. Zastanawiałem się, czy ktoś inny mógłby pomóc.

To, co próbuję zrobić, to utworzyć wiersz z 2 końcowymi separatorami, które zapewniają dopełnienie - następnie w wewnętrznych elementach dwóch wierszy powinno znajdować się wpisywanie tekstu wyszukiwania i lista rozwijana wyboru wyszukiwania.

Oto przykład, na którym pracuję: http://materializecss.com/forms.html

Z góry dziękuję.

Oto fragment kodu, o którym mowa.

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

Ponieważ zastępują one domyślne ustawienia przeglądarki, wybrane style wymagają do działania JavaScript. Musisz dołączyć plik JavaScript Materialize, a następnie wywołać

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

po załadowaniu tego pliku.

Projekt selectfunkcjonalności w materialize CSS jest moim zdaniem całkiem dobrym powodem, aby z niego nie korzystać.

Musisz zainicjować element select za pomocą material_select(), jak wspomina @ littleguy23. Jeśli tego nie zrobisz, pole wyboru nie zostanie nawet wyświetlone! W staromodnej aplikacji jQuery mogę ją zainicjować w funkcji gotowości dokumentu. Zgadnij co, ani ja, ani wiele innych osób nie używamy obecnie jQuery, ani też nie inicjalizujemy naszych aplikacji w haku Document ready.

Dynamicznie tworzone zaznaczenia . A co, jeśli dynamicznie tworzę selekcje, na przykład w ramach takiej jak Ember, która generuje widoki w locie? Muszę dodać logikę do każdego widoku, aby zainicjować pole wyboru za każdym razem, gdy generowany jest widok, lub napisać mieszankę widoku, aby obsłużyć to za mnie. I jest jeszcze gorzej: kiedy widok jest generowany i w terminologii Ember didInsertElementjest wywoływany, powiązanie z listą opcji dla pola wyboru mogło jeszcze nie zostać rozwiązane, więc potrzebuję specjalnej logiki obserwującej listę opcji, aby poczekać, aż zostanie wypełniony przed nawiązaniem połączenia z material_select. Jeśli opcje się zmienią, jak łatwo mogą, material_selectnie ma o tym pojęcia i nie aktualizuje listy rozwijanej. Mogę zadzwonićmaterial_select ponownie, gdy zmienią się opcje, ale wygląda na to, że nic nie robi (jest ignorowane).

Innymi słowy, wydaje się, że założeniem projektowym stojącym za zmaterializowanymi polami wyboru CSS jest to, że wszystkie one znajdują się podczas ładowania strony, a ich wartości nigdy się nie zmieniają.

Realizacja . Z estetycznego punktu widzenia nie jestem również zwolennikiem sposobu, w jaki materialize CSS implementuje swoje listy rozwijane, czyli tworzenie równoległego zestawu cieni elementów w innym miejscu w DOM. Oczywiście, alternatywy takie jak select2 robią to samo i może nie być innego sposobu na osiągnięcie niektórych efektów wizualnych (naprawdę?). Jednak dla mnie, kiedy sprawdzam element, chcę zobaczyć element, a nie jakąś wersję cienia gdzieś indziej, którą ktoś magicznie stworzył.

Kiedy Ember niszczy widok, nie jestem pewien, czy materialize CSS zburzy utworzone przez siebie elementy cienia. Właściwie byłbym bardzo zaskoczony, gdyby tak się stało. Jeśli moja teoria jest poprawna, w miarę generowania i niszczenia widoków, Twój DOM zostanie zanieczyszczony dziesiątkami zestawów cieni, które nie są z niczym powiązane. Dotyczy to nie tylko Ember, ale wszelkich innych front-endów OPA opartych na MVC / szablonach.

Wiązania . Nie byłem również w stanie dowiedzieć się, jak uzyskać wartość wybraną w oknie dialogowym, aby powiązać z czymś użytecznym w środowisku takim jak Ember, który wywołuje pola wyboru za pośrednictwem {{view 'Ember.Select' value=country}}interfejsu typu. Innymi słowy, gdy coś jest zaznaczone, countrynie jest aktualizowane. To jest zerwanie umowy.

Fale . Nawiasem mówiąc, te same problemy dotyczą efektu „fali” na przyciskach. Musisz go inicjalizować za każdym razem, gdy tworzony jest przycisk. Osobiście nie obchodzi mnie efekt fali i nie rozumiem, o co w tym wszystkim chodzi, ale jeśli chcesz fal, pamiętaj, że spędzisz znaczną część reszty swojego życia, martwiąc się, jak to zrobić. zainicjuj każdy przycisk po jego utworzeniu.

Doceniam wysiłek włożony w materializację CSS i jest tam kilka fajnych efektów wizualnych, ale jest za duży i ma zbyt wiele pułapek, takich jak powyższe, aby być czymś, czego bym użył. Planuję teraz wydrzeć materializację CSS z mojej aplikacji i wrócić do Bootstrap lub warstwy na wierzchu Suit CSS. Twoje narzędzia powinny ułatwiać Ci życie, a nie utrudniać.

@ littleguy23 To prawda, ale nie chcesz tego robić w przypadku wielokrotnego wyboru. Więc tylko mała zmiana w kodzie:

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

To zadziałało dla mnie, bez jquery lub select wrapper z klasą input, tylko material.js i ten vanilla js:

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

Jak widać, otrzymałem rzeczywisty styl materializuj css, a nie domyślną przeglądarkę.

To też działa: class = "browser-default"

Jeśli używasz Angularjs, możesz użyć wtyczki angular -materialize , która zapewnia kilka przydatnych dyrektyw. Wtedy nie musisz inicjować w js, po prostu dodaj material-selectdo zaznaczenia:

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

Rozwiązaniem, które u mnie zadziałało, jest wywołanie funkcji „material_select” po załadowaniu danych opcji. Jeśli wypiszesz wartość OptionsList.find (). Count () na konsolę, jest to pierwsze 0, a następnie kilka milisekund później lista zostanie wypełniona danymi.

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

Dla mnie żadna z pozostałych odpowiedzi nie zadziałała, ponieważ używam najnowszej wersji MaterializeCSS i Meteor i jest niekompatybilność między wersjami jquery, Meteor 1.1.10 używa jquery 1.11 (nadpisanie tej zależności nie jest łatwe i prawdopodobnie zepsuje Meteor / Blaze) i testowanie Materialize z jquery 2.2 działa dobrze. Zobacz https://stackoverflow.com/a/34809976/2882279Więcej informacji można .

Jest to znany problem z listami rozwijanymi i selekcjami w materializowaniu 0.97.2 i 0.97.3; Aby uzyskać więcej informacji, zobacz https://github.com/Dogfalo/materialize/issues/2265 i https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Używam wersji MaterializeCSS dla Sass w Meteor i obejść problem, używając poetyckiego: materialize-scss@1.97.1 w moim pliku pakietów meteorowych, aby wymusić starą wersję. Rozwijane listy teraz działają, stare jQuery i wszystko!

Wywołaj kod materialize css jquery dopiero po wyrenderowaniu kodu HTML. Możesz więc mieć kontroler, a następnie uruchomić usługę, która wywołuje kod jquery w kontrolerze. Spowoduje to prawidłowe renderowanie przycisku wyboru. Jednak jeśli spróbujesz użyć ngChange lub ngSubmit, może to nie zadziałać ze względu na dynamiczny styl tagu select.

Tylko to zadziałało dla mnie:

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

Znalazłem się w sytuacji, w której korzystam z wybranego rozwiązania

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

z jakiegokolwiek powodu generował błędy, ponieważ nie można było znaleźć funkcji material_select (). Nie można było po prostu powiedzieć, <select class="browser-default... ponieważ użyłem frameworka, który automatycznie renderował formularze. Więc moim rozwiązaniem było dodanie klasy za pomocą js (Jquery)

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

Najpierw upewnij się, że zainicjowałeś go w pliku document. Już w ten sposób:

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

Następnie wypełnij go swoimi danymi w dowolny sposób. Mój przykład:

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

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

Upewnij się, że po zakończeniu z populacją, aby wywołać tę zawartość Zmieniono w ten sposób:

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

W przypadku domyślnej przeglądarki

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

Lub rozwiązanie Jquery po linku t Biblioteka Jquery i pliki materializacji lokalnego / CDN

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

Bardzo podoba mi się ten framework, ale co u licha wyświetlić: brak ...

Aby to sprawdzić, ponieważ w pierwszej odpowiedzi nie zaleca się używania materializecss ... w bieżącej wersji materialize nie trzeba już inicjować selekcji.