Materialise CSS - Sélectionnez Ne semble pas rendre
Je travaille actuellement avec CSS matérialise et il semble que je me suis accroché avec les champs sélectionnés.
J'utilise l'exemple fourni sur leur site, mais malheureusement c'est rendu dans la vue que ce soit. Je me demandais si quelqu'un d'autre pourrait peut-être aider.
Ce que j'essaie de faire est de créer une ligne avec 2 entretoises d'extrémité fournissant un remplissage - puis dans les deux éléments de ligne internes, il devrait y avoir une entrée de texte de recherche et une liste déroulante de sélection de recherche.
Voici l'exemple depuis 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 les paramètres par défaut du navigateur, le style sélectionné a besoin de Javascript pour fonctionner. Vous devez inclure le fichier Javascript Materialize, puis appeler
$(document).ready(function() {
$('select').material_select();
});
après avoir chargé ce fichier.
La conception de la fonctionnalité select dans Matérialiser 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 @ littleguy23 le mentionne. Sinon, la boîte de sélection ne sera même pas affichée! Dans une ancienne application jQuery, je peux l'initialiser dans la fonction de préparation de document. Devinez quoi, ni moi-même ni beaucoup d’autres n’utilisons jQuery ces derniers temps, et nous n’initialisons pas nos applications dans le hook document ready.
Création dynamique sélectionne . Que se passe-t-il si je crée des sélections de manière dynamique, comme cela se produit dans un cadre tel qu'Ember qui génère des vues à la volée? Je dois ajouter une logique dans chaque vue pour initialiser la zone de sélection chaque fois qu'une vue est générée, ou écrire un mix de vues pour gérer cela pour moi. Et c’est pire que cela: lorsque la vue est générée et que l’on appelle didInsertElement, la liaison à la liste d’options pour la zone de sélection n’a peut-être pas encore été résolue; j’ai donc besoin d’une logique spéciale pour observer la liste il est rempli avant d'appeler le material_select. Si les options changent, comme elles pourraient le faire facilement, material_select n'en a aucune idée et ne met pas à jour le menu déroulant. Je peux appeler à nouveau material_select lorsque les options changent, mais il semble que cela ne fasse rien (est ignoré).
En d'autres termes, il semble que l'hypothèse de conception derrière la matérialisation des zones de sélection CSS est qu'elles sont toutes présentes au chargement de la page et que leurs valeurs ne changent jamais.
La mise en oeuvre . D'un point de vue esthétique, je ne suis pas non plus favorable à la manière dont CSS matérialise la mise en œuvre de CSS, qui consiste à créer un ensemble parallèle d'éléments fantômes ailleurs dans le DOM. Certes, des alternatives telles que select2 font la même chose, et il n’ya peut-être pas d’autre moyen d’obtenir certains effets visuels (vraiment?). Pour moi, cependant, lorsque j'inspecte un élément, je veux voir l'élément, et non une version de l'ombre quelque part que quelqu'un a créée par magie.
Lorsque Ember détruit la vue, je ne suis pas sûr que matérialiser CSS supprime les éléments ombrés créés. En fait, je serais assez surpris que ce soit 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'ombres non connectés à rien. Cela s'applique non seulement à Ember, mais à tout autre framework frontal OPA basé sur des modèles MVC /.
Reliures . Je n'ai pas non plus été en mesure de comprendre comment obtenir la valeur sélectionnée dans la boîte de dialogue afin qu'elle soit reliée à quelque chose d'utile dans un cadre tel qu'Ember qui appelle des zones de sélection via une interface de type {{view 'Ember.Select' value=country}}. En d'autres termes, lorsque quelque chose est sélectionné, country n'est pas mis à jour. Ceci est un deal-breaker.
Vagues . En passant, les mêmes problèmes s’appliquent à l’effet de "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 en retourne, mais si vous voulez des vagues, sachez que vous passerez une bonne partie de votre vie à vous préoccuper de la initialiser chaque bouton lors de sa création.
J'apprécie les efforts déployés par les gars de la matérialisation de CSS, et il y a quelques effets visuels sympas ici, mais c'est trop gros et il y a trop de pièges comme celui-ci pour être quelque chose que je voudrais utiliser. Je prévois maintenant d'extraire du contenu CSS de mon application et de revenir à Bootstrap ou à un calque situé au-dessus de Suit CSS. Vos outils devraient vous rendre la vie plus facile, pas plus difficile.
@ littleguy23 C'est exact, mais vous ne voulez pas le faire pour sélectionner plusieurs éléments. Donc, juste un petit changement au code:
$(document).ready(function() {
// Select - Single
$('select:not([multiple])').material_select();
});
La solution qui a fonctionné pour moi consiste à appeler la fonction 'material_select' après le chargement des données des options. Si vous imprimez la valeur de OptionsList.find (). Count () sur la console, elle vaut 0, puis quelques millisecondes plus tard, la liste est remplie avec des données.
Template.[name].rendered = function() {
this.autorun(function() {
var optionsCursor = OptionsList.find().count();
if(optionsCursor > 0){
$('select').material_select();
}
});
};
Si vous utilisez Angularjs, vous pouvez utiliser le plugin angular-materialize , qui fournit des directives utiles. 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>
Cela fonctionne aussi: class = "browser-default"
Pour moi, aucune des autres réponses n'a fonctionné parce que j'utilise la dernière version de MaterializeCSS et de Meteor et qu'il existe une incompatibilité entre les versions de jquery, Meteor 1.1.10 utilise jquery 1.11 (il n'est pas facile de remplacer cette dépendance par de moins en moins Meteor/Blaze) et tester Materialize avec jquery 2.2 fonctionne bien. Voir https://stackoverflow.com/a/34809976/2882279 pour plus d'informations.
Ceci est un problème connu avec les menus déroulants et sélectionne dans matérialiser 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/45feae64410252fe51e56816e664c09cdc8931 .
J'utilise la version Sass de MaterializeCSS dans Meteor et j'ai contourné le problème en utilisant poetic: [email protected] dans mon fichier de packages météore pour forcer l'ancienne version. Les menus déroulants fonctionnent maintenant, vieux jquery et tout!
Appelez le code jquery css materialize uniquement après que le code HTML a été rendu. Ainsi, vous pouvez avoir un contrôleur et ensuite déclencher un service qui appelle le code jQuery dans le contrôleur. Cela rendra le bouton de sélection bien. Cependant, si vous essayez d'utiliser ngChange ou ngSubmit, cela pourrait ne pas fonctionner en raison du style dynamique de la balise select.
Seulement cela a fonctionné pour moi:
$(document).ready(function(){
$('select').not('.disabled').formSelect();
});
Cela a fonctionné pour moi, pas de jquery ou select wrapper 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 constater, j’ai le style réel de matérialiser css et non le navigateur par défaut.
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 la bibliothèque de liens t Jquery et vos fichiers local/CDN
<script>
(function($){
$(function(){
// Plugin initialization
$('select').not('.disabled').formSelect();
});
})(jQuery); // end of jQuery name space
J'aime beaucoup ce cadre, mais quoi d’avoir un écran: aucun ...
Je me suis retrouvé dans une situation d'utilisation de la solution choisie
$(document).ready(function() {
$('select').material_select();
});
quelle que soit la raison qui entraînait des erreurs, car la fonction material_select () n’était pas trouvée . Il n’était pas possible de dire <select class="browser-default... Parce que j’utilisais un cadre qui rendait automatiquement les formulaires. Ma solution consistait donc à ajouter la classe à l'aide de js (Jquery)
<script>
$(document).ready(function() {
$('select').attr("class", "browser-default")
});