CSS materialisieren - Wählen Sie Scheint nicht zu rendern

Ich arbeite derzeit mit materialize CSS und es scheint, dass ich mich mit den ausgewählten Feldern verfangen habe.

Ich verwende das Beispiel von ihrer Website, aber leider wird es in der Ansicht gerendert. Ich habe mich gefragt, ob jemand anderes helfen kann.

Ich versuche, eine Zeile mit 2 Endabstandshaltern zu erstellen, die eine Auffüllung bieten. Innerhalb der beiden inneren Zeilenelemente sollte dann eine Suchtexteingabe und eine Dropdown-Liste für die Suchauswahl vorhanden sein.

Dies ist das Beispiel, an dem ich arbeite: http://materializecss.com/forms.html

Vielen Dank im Voraus.

Hier ist der fragliche Codeausschnitt.

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

Da sie die Standardeinstellungen des Browsers überschreiben, benötigt das ausgewählte Styling Javascript, um ausgeführt zu werden. Sie müssen die Materialise Javascript-Datei einschließen und dann aufrufen

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

nachdem Sie diese Datei geladen haben.

Das Design der selectFunktionalität bei der Materialisierung von CSS ist meiner Meinung nach ein ziemlich guter Grund, es nicht zu verwenden.

Sie müssen das Auswahlelement mit initialisieren material_select(), wie @ littleguy23 erwähnt. Wenn Sie dies nicht tun, wird das Auswahlfeld nicht einmal angezeigt! In einer altmodischen jQuery-App kann ich sie in der Dokumentbereitschaftsfunktion initialisieren. Ratet mal, weder ich noch viele andere Leute verwenden heutzutage jQuery, noch initialisieren wir unsere Apps im Dokument-Ready-Hook.

Dynamisch erstellte Auswahlen . Was ist, wenn ich Auswahlen dynamisch erstelle, wie dies in einem Framework wie Ember der Fall ist, das Ansichten im laufenden Betrieb generiert? Ich muss in jeder Ansicht Logik hinzufügen, um das Auswahlfeld bei jeder Generierung einer Ansicht zu initialisieren, oder ein Ansichtsmixin schreiben, um dies für mich zu erledigen. Und es ist noch schlimmer: Wenn die Ansicht generiert und in Ember-Begriffen didInsertElementaufgerufen wird, ist die Bindung an die Liste der Optionen für das Auswahlfeld möglicherweise noch nicht gelöst. Daher muss die Optionsliste mithilfe einer speziellen Logik überwacht werden, um zu warten, bis sie angezeigt wird vor dem Anruf an die material_select. Wenn sich die Optionen wie leicht ändern, material_selecthat dies keine Ahnung und aktualisiert das Dropdown-Menü nicht. Ich kann material_selecterneut anrufen , wenn sich die Optionen ändern, aber es scheint, dass dies nichts bewirkt (wird ignoriert).

Mit anderen Worten, es scheint, dass die Entwurfsannahme hinter den Auswahlfeldern von CSS darin besteht, dass sie alle beim Laden der Seite vorhanden sind und sich ihre Werte nie ändern.

Implementierung . Aus ästhetischer Sicht bin ich auch nicht für die Art und Weise, wie CSS seine Dropdowns implementiert, dh eine parallele Schattenmenge von Elementen an einer anderen Stelle im DOM zu erstellen. Zugegeben, Alternativen wie select2 machen dasselbe, und es gibt möglicherweise keinen anderen Weg, um einige der visuellen Effekte zu erzielen (wirklich?). Wenn ich jedoch ein Element inspiziere, möchte ich das Element sehen, nicht irgendeine Schattenversion, die jemand auf magische Weise erstellt hat.

Wenn Ember die Ansicht herunterreißt, bin ich mir nicht sicher, ob CSS die von ihm erstellten Schattenelemente herunterreißt. Eigentlich wäre ich ziemlich überrascht, wenn es so wäre. Wenn meine Theorie richtig ist, wenn Ansichten generiert und abgerissen werden, wird Ihr DOM mit Dutzenden von Schatten-Dropdowns verschmutzt, die mit nichts verbunden sind. Dies gilt nicht nur für Ember, sondern für jedes andere MVC / Template-basierte OPA-Front-End-Framework.

Bindungen . Ich konnte auch nicht herausfinden, wie der im Dialogfeld ausgewählte Wert zum Binden an irgendetwas Nützliches in einem Framework wie Ember verwendet werden kann, das Auswahlfelder über eine Typschnittstelle aufruft {{view 'Ember.Select' value=country}}. Mit anderen Worten, wenn etwas ausgewählt ist, countrywird es nicht aktualisiert. Dies ist ein Deal-Breaker.

Wellen . Übrigens gelten die gleichen Probleme für den "Wellen" -Effekt auf Schaltflächen. Sie müssen es jedes Mal initialisieren, wenn eine Schaltfläche erstellt wird. Ich persönlich interessiere mich nicht für den Welleneffekt und verstehe nicht, worum es in der ganzen Aufregung geht, aber wenn Sie Wellen wollen, denken Sie daran, dass Sie einen Großteil Ihres restlichen Lebens damit verbringen werden, sich Gedanken darüber zu machen, wie Initialisieren Sie jede einzelne Schaltfläche, wenn sie erstellt wird.

Ich schätze die Bemühungen der materialisierten CSS-Leute und es gibt einige nette visuelle Effekte, aber es ist zu groß und hat zu viele Fallstricke wie die oben genannten, um etwas zu sein, das ich verwenden würde. Ich plane jetzt, materialisiertes CSS aus meiner App herauszureißen und entweder zu Bootstrap oder einer Ebene über Suit CSS zurückzukehren. Ihre Werkzeuge sollten Ihnen das Leben erleichtern und nicht erschweren.

@ littleguy23 Das ist richtig, aber du willst es nicht für die Mehrfachauswahl machen. Also nur eine kleine Änderung am Code:

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

Dies funktionierte für mich, keine Abfrage oder Select-Wrapper mit Eingabeklasse, nur material.js und diese Vanille js:

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

Wie Sie sehen können, habe ich den tatsächlichen CSS-Stil materialisiert und nicht die Standardeinstellung des Browsers.

Dies funktioniert auch: class = "browser-default"

Wenn Sie Angularjs verwenden, können Sie das Angular -Materialise-Plugin verwenden , das einige nützliche Anweisungen enthält. Dann müssen Sie nicht in js initialisieren, sondern nur material-selectzu Ihrer Auswahl hinzufügen :

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

Die Lösung, die für mich funktioniert hat, besteht darin, die Funktion 'material_select' aufzurufen, nachdem die Optionsdaten geladen wurden. Wenn Sie den Wert von OptionsList.find (). Count () in der Konsole ausdrucken, ist es zuerst 0, dann einige Millisekunden später wird die Liste mit Daten gefüllt.

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

Für mich hat keine der anderen Antworten funktioniert, da ich die neueste Version von MaterialiseCSS und Meteor verwende und die JQuery-Versionen nicht kompatibel sind. Meteor 1.1.10 verwendet JQuery 1.11 (das Überschreiben dieser Abhängigkeit ist nicht einfach und wird wahrscheinlich Meteor / Blaze beschädigen.) und das Testen von Materialise mit jquery 2.2 funktioniert einwandfrei. Weitere Informationen finden Sie unter https://stackoverflow.com/a/34809976/2882279 .

Dies ist ein bekanntes Problem bei Dropdowns und Auswahlen in materialise 0.97.2 und 0.97.3; Weitere Informationen finden Sie unter https://github.com/Dogfalo/materialize/issues/2265 und https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Ich verwende die Sass-Version von MaterialiseCSS in Meteor und habe das Problem mithilfe von poetic: materialize-scss@1.97.1 in meiner Meteor-Paketdatei umgangen, um die alte Version zu erzwingen. Die Dropdowns funktionieren jetzt, alte Abfrage und alles!

Rufen Sie den materialise css jquery code erst auf, nachdem der HTML-Code gerendert wurde. Sie können also einen Controller haben und dann einen Dienst auslösen, der den Abfragecode im Controller aufruft. Dadurch wird die Auswahltaste in Ordnung gebracht. Wenn Sie jedoch versuchen, ngChange oder ngSubmit zu verwenden, funktioniert dies möglicherweise aufgrund des dynamischen Stils des ausgewählten Tags nicht.

Nur das hat bei mir funktioniert:

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

Ich befand mich in einer Situation, in der die ausgewählte Lösung verwendet wurde

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

Aus irgendeinem Grund wurden Fehler ausgelöst, da die Funktion material_select () nicht gefunden werden konnte. Es war nicht möglich, nur zu sagen, <select class="browser-default... weil ich ein Framework verwendet habe, das die Formulare automatisch gerendert hat. Meine Lösung bestand also darin, die Klasse mit js (Jquery) hinzuzufügen.

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

Stellen Sie zunächst sicher, dass Sie es im Dokument initialisieren.

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

Füllen Sie es dann wie gewünscht mit Ihren Daten. Mein Beispiel:

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

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

Stellen Sie sicher, dass Sie diesen Inhalt wie folgt auslösen, nachdem Sie mit der Grundgesamtheit fertig sind:

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

Für den Standardbrowser

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

Oder die Jquery-Lösung nach dem Link t Jquery-Bibliothek und Ihre lokalen / CDN-Materialisierungsdateien

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

Ich mag diesen Rahmen wirklich, aber was um alles in der Welt zu zeigen: keine ...

Nur um dies weiterzuverfolgen, da in der Top-Antwort empfohlen wird, keine materializecss zu verwenden ... In der aktuellen Version von materialise müssen Sie keine Auswahl mehr initialisieren.