Materialise CSS - Sélectionnez ne semble pas être rendu

Je travaille actuellement avec Materialise CSS et il semble que je me suis accroché aux champs de sélection.

J'utilise l'exemple fourni sur leur site, mais malheureusement, il est rendu dans la vue. Je me demandais si quelqu'un d'autre pourrait aider.

Ce que j'essaie de faire est de créer une ligne avec 2 espaceurs d'extrémité qui fournissent un rembourrage - puis dans les deux éléments de la ligne intérieure, il devrait y avoir une entrée de texte de recherche et une liste déroulante de sélection de recherche.

Voici l'exemple sur lequel je travaille: http://materializecss.com/forms.html

Merci d'avance.

Voici l'extrait de code en question.

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

Comme ils remplacent la valeur par défaut du navigateur, le style de sélection a besoin de Javascript pour s'exécuter. Vous devez inclure le fichier Javascript Materialise, puis appeler

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

après avoir chargé ce fichier.

La conception des selectfonctionnalités dans Materialise CSS est, à mon avis, une très bonne raison de ne pas l'utiliser.

Vous devez initialiser l'élément select avec material_select(), comme le mentionne @ littleguy23. Si vous ne le faites pas, la boîte de sélection ne s'affiche même pas! Dans une application jQuery à l'ancienne, je peux l'initialiser dans la fonction Document Ready. Devinez quoi, ni moi ni beaucoup d'autres personnes n'utilisons jQuery ces jours-ci, ni n'initialisons nos applications dans le hook document ready.

Sélections créées dynamiquement . Que faire si je crée des sélections de manière dynamique, comme cela se produit dans un cadre comme Ember qui génère des vues à la volée? Je dois ajouter une logique dans chaque vue pour initialiser la boîte de sélection à chaque fois qu'une vue est générée, ou écrire un mixin de vue pour gérer cela pour moi. Et c'est pire que cela: lorsque la vue est générée, et en termes Ember didInsertElementest appelée, la liaison à la liste d'options de la boîte de sélection n'a peut-être pas encore été résolue, j'ai donc besoin d'une logique spéciale en observant la liste d'options pour attendre qu'elle soit rempli avant d'appeler le material_select. Si les options changent, comme elles pourraient facilement le faire, material_selectn'a aucune idée à ce sujet et ne met pas à jour la liste déroulante. Je peux appeler à material_selectnouveau lorsque les options changent, mais il semble que cela ne fait rien (est ignoré).

En d'autres termes, il semble que l'hypothèse de conception derrière les boîtes de sélection de CSS matérialise est qu'elles sont toutes là au chargement de la page et que leurs valeurs ne changent jamais.

Mise en œuvre . D'un point de vue esthétique, je ne suis pas non plus en faveur de la manière dont Materialise CSS implémente ses listes déroulantes, qui consiste à créer un ensemble parallèle et ombré d'éléments ailleurs dans le DOM. Certes, des alternatives telles que select2 font la même chose, et il n'y a peut-être pas d'autre moyen d'obtenir certains des effets visuels (vraiment?). Pour moi, cependant, lorsque j'inspecte un élément, je veux voir l'élément, pas une version d'ombre ailleurs que quelqu'un a créée par magie.

Quand Ember démolit la vue, je ne suis pas sûr que Materialise CSS démolit les éléments d'ombre qu'il a créés. En fait, je serais assez surpris si c'était le cas. Si ma théorie est correcte, au fur et à mesure que les vues sont générées et détruites, votre DOM finira par être pollué par des dizaines d'ensembles de listes déroulantes d'ombre non connectées à quoi que ce soit. Cela s'applique non seulement à Ember mais à tout autre framework frontal OPA basé sur MVC / template.

Liaisons . Je n'ai pas non plus été en mesure de comprendre comment obtenir la valeur sélectionnée dans la boîte de dialogue pour se lier à tout ce qui est utile dans un cadre comme Ember qui appelle des boîtes de sélection via une {{view 'Ember.Select' value=country}}interface de type. En d'autres termes, lorsqu'un élément est sélectionné, il countryn'est pas mis à jour. C'est un facteur décisif.

Des vagues . En passant, les mêmes problèmes s'appliquent à l'effet «vague» sur les boutons. Vous devez l'initialiser à chaque fois qu'un bouton est créé. Personnellement, je ne me soucie pas de l'effet de vague et je ne comprends pas de quoi il s'agit, mais si vous voulez des vagues, sachez que vous passerez une bonne partie du reste de votre vie à vous soucier de la façon de le faire. initialisez chaque bouton lors de sa création.

J'apprécie les efforts déployés par les gars de Materialise CSS, et il y a de bons effets visuels là-bas, mais c'est trop gros et a trop de pièges tels que ceux ci-dessus pour être quelque chose que j'utiliserais. Je prévois maintenant d'extraire le CSS matérialisé de mon application et de revenir soit à Bootstrap, soit à une couche au-dessus de Suit CSS. Vos outils devraient vous rendre la vie plus facile, pas plus difficile.

@ littleguy23 C'est correct, mais vous ne voulez pas le faire pour la sélection multiple. Donc juste un petit changement au code:

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

Cela a fonctionné pour moi, pas de jquery ou de wrapper select avec la classe d'entrée, juste material.js et ce vanilla js:

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

Comme vous pouvez le voir, j'ai le style réel de materialize css et non le style par défaut du navigateur.

Cela fonctionne aussi: class = "browser-default"

Si vous utilisez Angularjs, vous pouvez utiliser le plugin angular-materialize , qui fournit des directives pratiques. Ensuite, vous n'avez pas besoin d'initialiser dans le js, ajoutez simplement material-selectà votre sélection:

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

La solution qui a fonctionné pour moi est d'appeler la fonction 'material_select' une fois que les données d'options ont été chargées. Si vous affichez la valeur de OptionsList.find (). Count () sur la console, c'est d'abord 0 puis quelques millisecondes plus tard, la liste est remplie de données.

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

Pour moi, aucune des autres réponses n'a fonctionné car j'utilise la dernière version de MaterialiseCSS et Meteor et il y a incompatibilité entre les versions de jquery, Meteor 1.1.10 utilise jquery 1.11 (outrepasser cette dépendance n'est pas facile et cassera probablement Meteor / Blaze) et tester Materialise avec jquery 2.2 fonctionne très bien. Voir https://stackoverflow.com/a/34809976/2882279 pour plus d'informations.

Il s'agit d'un problème connu avec les listes déroulantes et sélectionne dans Materialise 0.97.2 et 0.97.3; pour plus d'informations, voir https://github.com/Dogfalo/materialize/issues/2265 et https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

J'utilise la version Sass de MaterialiseCSS dans Meteor et j'ai contourné le problème en utilisant poetic: [email protected] dans mon fichier de packages meteor pour forcer l'ancienne version. Les listes déroulantes fonctionnent maintenant, l'ancienne jquery et tout!

Appelez le code jquery css materialize uniquement après le rendu du html. Vous pouvez donc avoir un contrôleur, puis déclencher un service qui appelle le code jquery dans le contrôleur. Cela rendra le bouton de sélection correct. Cependant, si vous essayez d'utiliser ngChange ou ngSubmit, cela peut ne pas fonctionner en raison du style dynamique de la balise select.

Seul cela a fonctionné pour moi:

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

Je me suis retrouvé dans une situation où l'utilisation de la solution choisie

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

pour une raison quelconque, des erreurs ont été lancées car la fonction material_select () n'a pas pu être trouvée. Il n'était pas possible de dire simplement <select class="browser-default... parce que j'utilisais un framework qui rendait automatiquement les formulaires. Ma solution était donc d'ajouter la classe en utilisant js (Jquery)

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

Tout d'abord, assurez-vous de l'initialiser dans document.ready comme ceci:

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

Ensuite, remplissez-le avec vos données comme vous le souhaitez. Mon exemple:

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

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

Assurez-vous, une fois que vous avez terminé avec la population, de déclencher ce contenuChangé comme ceci:

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

Pour le navigateur par défaut,

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

Ou la solution Jquery après le lien t la bibliothèque Jquery et vos fichiers de matérialisation locaux / CDN

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

J'aime beaucoup ce cadre, mais que diable avoir d'affichage: aucun ...

Juste pour faire un suivi, car la réponse la plus élevée recommande de ne pas utiliser materializecss ... dans la version actuelle de materialize, vous n'avez plus besoin d'initialiser les sélections.