CSS materialisieren - Wählen Sie Scheint nicht zu rendern

119

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>

Ryan Rentfro
quelle

Antworten:

247

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.

jameslittle230
quelle
21
Andernfalls können Sie die Standardeinstellung des Browsers verwenden und es ist keine Initialisierung erforderlich:<select class="browser-default">
Shwaydogg
8
Das neueste Änderungsprotokoll sagt dies:Rename plugin call .material_select() to .formSelect()
ss2025
Schreiben Sie dies nicht in $ (document) .ready (function () {sonst funktioniert es nicht
HN Singh
Meine Güte! Ich habe stundenlang meinen Kopf gegen eine Mauer geschlagen, um das herauszufinden ... Danke ...
Clyde
50

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.


quelle
3
Vielen Dank für die ausführliche Antwort. Es ist sehr informativ und ich stimme vielen Ihrer Gefühle zu. Ich mag es wirklich, CSS und ihre Ansätze mit vielen Dingen zu materialisieren. Ich verstehe genau das, was Sie sagen, und habe viel über die Effekte nachgedacht, die moderne Apps erfordern werden. Ich bin mir noch nicht sicher, ob diese Arten von Designs und Konzepten in große Software passen. Ich mag das Aussehen und die Konzepte. Danke nochmal.
Ryan Rentfro
Tolle Resonanz. Auch bei Materialise treten SELECT-Probleme auf, z. B. Klickereignisse in der Bildlaufleiste, mit denen die OPTIONs-Liste geschlossen wird. @torazaburo Was hast du am Ende gemacht? Zurück zum Bootstrap?
Sean O
@ SeanO für jetzt, ja.
Ich habe genug Zeit damit verbracht, die meisten Webseiten und Formulare zu konvertieren, um sie zu materialisieren, aber jetzt habe ich mich nicht mehr mit der Lösung des ausgewählten Problems befasst. Es ist wirklich schlimm, das Materializecss hat großen Datenverkehr, löst dieses kleine Problem aber immer noch nicht. Wenn Sie prüfen, ob Sie es für ein Verbraucherprodukt verwenden können, warten Sie, bis es ausgereift ist
Asif Shahzad,
9
Sie können verwenden <select class="browser-default">und müssen NICHT mit js initialisieren, und Sie haben die native Benutzeroberfläche, an die der Benutzer gewöhnt ist. Die JS-Initialisierung ist für jede Implementierung erforderlich, die die native Benutzeroberfläche nicht verwendet.
Shwaydogg
9

@ 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();
});
DFlores009
quelle
2
Warum? Wenn wir mehrere Auswahlfelder ausschließen, funktionieren sie nicht.
Desprit
6

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);
});

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

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

lomelisan
quelle
5

Dies funktioniert auch: class = "browser-default"

Abel
quelle
3

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>
Artemis_134
quelle
3

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();
        }
    });
};
Brandiqa
quelle
1
Schön, Brandiqa zu finden! Ich hatte angerufen $('select').material_select();aus AppComponent.ngOnInit(), aber Sie müssen es nennen , nachdem die <select/>HTML gerendert wird, was ich auch tat in dropdown.component.ts. Das Update bestand darin, es von der ngOnInit()Komponente aus aufzurufen, die die Dropdowns verwendet.
Levi Fuller
2

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: [email protected] in meiner Meteor-Paketdatei umgangen, um die alte Version zu erzwingen. Die Dropdowns funktionieren jetzt, alte Abfrage und alles!

Mozfet
quelle
1

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.

Nitish Phanse
quelle
1

Nur das hat bei mir funktioniert:

$(document).ready(function(){
    $('select').not('.disabled').formSelect();
});
Igor Shumichenko
quelle
0

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")
});

entsperren
quelle
0

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');
Alejandro Bastidas
quelle
0

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

user2060451
quelle
-5

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.

user2386854
quelle
9
Ich verwende Version 0.95.3 und muss noch Auswahlen initialisieren. Mache ich etwas falsch?
Uriel Hernández
3
Sie müssen SELECTs in Version 0.96.1 noch initialisieren (nicht im Browser-Standard).
Sean O
4
Downvote: Sie befinden sich in Version 0.97.1 und Sie müssen die Auswahl noch mit Javascript initialisieren.
Pablo Fernandez
0.100.2: Auswahlen müssen initialisiert werden. Es gibt keine Beweise dafür, dass diese Antwort jemals richtig war.
JJJ