it-swarm.com.de

Materialise CSS - Wählen Sie Rendering nicht aus

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

Ich verwende das Beispiel, das von ihrer Website bereitgestellt wird, aber es wird in der Ansicht leider gerendert. Ich fragte mich, ob jemand anders helfen könnte.

Was ich versuche, ist, eine Reihe mit zwei Endabstandshaltern zu erstellen, die eine Auffüllung ermöglichen - dann sollte in den inneren zwei Reihenelementen 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

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

109
Ryan Rentfro

Da sie die Standardeinstellung des Browsers überschreiben, muss für das ausgewählte Design Javascript aktiviert sein. Sie müssen die Materialize-Javascript-Datei einschließen und dann aufrufen

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

nachdem Sie diese Datei geladen haben.

237
jameslittle230

Das Design der select-Funktionalität in materialise CSS ist meiner Meinung nach ein ziemlich guter Grund, sie nicht zu verwenden.

Sie müssen das select-Element mit material_select() initialisieren, 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 Document Ready-Funktion initialisieren. Weißt du was, weder ich noch viele andere Leute benutzen jQuery heutzutage, noch initialisieren wir unsere Apps im Document Ready Hook.

Dynamisch erstellt wählt . Was passiert, wenn ich Selektionen dynamisch erstelle, wie dies in einem Framework wie Ember der Fall ist, das fliegende Ansichten generiert? Ich muss in jeder Ansicht eine Logik hinzufügen, um das Auswahlfeld jedes Mal zu initialisieren, wenn eine Ansicht generiert wird, oder einen Ansichtsmixin zu schreiben, der das für mich handhabt. Und es ist schlimmer als das: Wenn die Ansicht generiert wird und in Ember-Begriffen didInsertElement aufgerufen wird, wurde die Bindung an die Liste der Optionen für das Auswahlfeld möglicherweise noch nicht aufgelöst. Daher brauche ich eine spezielle Logik, um die Optionsliste zu warten Es wird aufgefüllt, bevor der material_select aufgerufen wird. Wenn sich die Optionen ändern, wie es leicht möglich wäre, hat material_select keine Ahnung und aktualisiert die Dropdown-Liste nicht. Ich kann material_select erneut aufrufen, wenn sich die Optionen ändern, aber es scheint, dass dies nichts tut (wird ignoriert).

Mit anderen Worten, es scheint, dass die Designannahme hinter materialise CSS-Auswahlfeldern darin besteht, dass sie alle beim Laden der Seite vorhanden sind und ihre Werte sich niemals ändern.

Implementierung . Aus ästhetischer Sicht befürworte ich auch nicht die Art und Weise, wie CSS die Dropdowns von CSS implementiert, dh eine parallele, schattenhafte Menge von Elementen an anderer Stelle im DOM. 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 irgendwo eine Schattenversion, die jemand magisch erstellt hat.

Wenn Ember die Ansicht aufreißt, bin ich nicht sicher, dass CSS die von ihm erstellten Schattenelemente zerlegt. Eigentlich wäre ich ziemlich überrascht, wenn es so wäre. Wenn meine Theorie stimmt, werden Ansichten generiert und abgerissen, und Ihr DOM wird mit Dutzenden von Schattenwurf-Dropdowns verschmutzt, die mit nichts verbunden sind. Dies gilt nicht nur für Ember, sondern auch für alle anderen MVC/Template-basierten OPA-Frontend-Frameworks.

Bindungen . Ich war auch nicht in der Lage, herauszufinden, wie der Wert im Dialogfeld ausgewählt wird, um an nützliche Elemente in einem Framework wie Ember zu binden, das Auswahlfelder über eine {{view 'Ember.Select' value=country}}-Typschnittstelle aufruft. Wenn etwas ausgewählt wird, wird country nicht aktualisiert. Dies ist ein Dealbreaker.

Wellen . Das gleiche gilt übrigens auch für den "Wave" -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 bei dem ganzen Trubel geht, aber wenn Sie Wellen wollen, sollten Sie sich bewusst machen, dass Sie einen Großteil Ihres Lebens damit verbringen, sich Sorgen darüber zu machen, wie es geht Initialisieren Sie jede einzelne Schaltfläche, wenn sie erstellt wird.

Ich schätze die Anstrengung, die die CSS-Jungs gemacht haben, und es gibt einige schöne visuelle Effekte, aber es ist zu groß und hat zu viele gotchas wie die oben genannten, um etwas zu sein, das ich verwenden würde. Ich habe vor, Materialise CSS aus meiner App herauszureißen und entweder zu Bootstrap oder zu einer Ebene über Suit CSS zurückzukehren. Ihre Werkzeuge sollten Ihr Leben leichter machen, nicht schwieriger.

45
user663031

@ littleguy23 Das ist richtig, aber Sie möchten es nicht für die Mehrfachauswahl tun. Also nur eine kleine Änderung am Code:

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

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

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

};

3
Brandiqa

Wenn Sie Angularjs verwenden, können Sie das Plugin angle-materialize verwenden, das einige praktische Anweisungen enthält. Dann brauchen Sie nicht in den js zu initialisieren, fügen Sie einfach material-select zu Ihrer Auswahl hinzu:

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

Das funktioniert auch: class = "browser-default"

2
Abel

Für mich funktionierte keine der anderen Antworten, da ich die neueste Version von MaterializeCSS und Meteor verwende und es zwischen den Jquery-Versionen Inkompatibilität gibt. Meteor 1.1.10 verwendet Jquery 1.11 (das Überschreiben dieser Abhängigkeit ist nicht einfach und wird wahrscheinlich Meteor/Blaze brechen.) und Testen von Materialise mit Jquery 2.2 funktioniert einwandfrei. Siehe https://stackoverflow.com/a/34809976/2882279 für weitere Informationen.

Dies ist ein bekanntes Problem mit Dropdown-Listen und 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 MaterializeCSS in Meteor und umginge das Problem mithilfe von poetic: [email protected] in meiner Meteor-Packages-Datei, um die alte Version zu erzwingen. Die Dropdowns funktionieren jetzt, alte Jquery und alles!

2
Mozfet

Rufen Sie den Code für materialise css jquery erst auf, nachdem die HTML-Datei gerendert wurde. Sie können also einen Controller haben und dann einen Dienst auslösen, der den Jquery-Code 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 Stylings des select-Tags nicht.

1
Nitish Phanse

Nur das hat bei mir geklappt:

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

Das hat bei mir geklappt, keine JQuery oder Select-Wrapper mit Input-Klasse, nur material.js und diese Vanilla-Js:

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

enter image description hereenter image description here

Wie Sie sehen können, habe ich den tatsächlichen Stil von materialize css und nicht die Standardeinstellungen des Browsers.

0
lomelisan

Stellen Sie zunächst sicher, dass Sie es in document.ready wie folgt initialisieren:

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

Füllen Sie Ihre Daten dann auf die gewünschte Weise aus. 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, nachdem Sie mit der Grundgesamtheit fertig sind, dieses contentChanged wie folgt auslösen:

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

Für Standardbrowser

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

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

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

Ich mag dieses Framework wirklich, aber was in aller Welt soll Display haben: keines ...

0
user2060451

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

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

aus irgendeinem Grund warfen Fehler, weil die Funktion material_select () nicht gefunden wurde. Es war nicht möglich, einfach <select class="browser-default....__ zu sagen, weil ich ein Framework verwendete, das die Formulare automatisch renderte. .__ Meine Lösung bestand also darin, die Klasse mit js (Jquery) hinzuzufügen.

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

0
unlockme