Materializar CSS - Seleccionar no parece renderizar

Actualmente estoy trabajando con materialize CSS y parece que me enganché con los campos de selección.

Estoy usando el ejemplo proporcionado en su sitio, pero desafortunadamente se muestra en la vista. Me preguntaba si alguien más podría ayudar.

Lo que estoy tratando de hacer es crear una fila con 2 espaciadores finales que proporcionen relleno; luego, dentro de los elementos de las dos filas internas, debería haber una entrada de texto de búsqueda y un menú desplegable de selección de búsqueda.

Este es el ejemplo en el que estoy trabajando: http://materializecss.com/forms.html

Gracias de antemano.

Aquí está el fragmento de código en cuestión.

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

Debido a que anulan el navegador predeterminado, el estilo de selección necesita Javascript para ejecutarse. Debe incluir el archivo Materialise Javascript y luego llamar

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

después de haber cargado ese archivo.

El diseño de selectfuncionalidad en materialize CSS es, en mi opinión, una razón bastante buena para no usarlo.

Tienes que inicializar el elemento de selección con material_select(), como menciona @ littleguy23. Si no lo hace, ¡ni siquiera se muestra el cuadro de selección! En una aplicación jQuery pasada de moda, puedo inicializarla en la función de preparación de documentos. Adivina qué, ni yo ni muchas otras personas estamos usando jQuery en estos días, ni inicializamos nuestras aplicaciones en el gancho de preparación de documentos.

Selecciones creadas dinámicamente . ¿Qué sucede si estoy creando selecciones dinámicamente, como sucede en un marco como Ember que genera vistas sobre la marcha? Tengo que agregar lógica en cada vista para inicializar el cuadro de selección cada vez que se genera una vista, o escribir una vista mixin para manejar eso por mí. Y es peor que eso: cuando se genera la vista, y en términos de Ember didInsertElementse llama, es posible que el enlace a la lista de opciones para el cuadro de selección aún no se haya resuelto, por lo que necesito una lógica especial al observar la lista de opciones para esperar hasta que esté poblado antes de realizar la llamada al material_select. Si las opciones cambian, como podría ocurrir fácilmente, material_selectno tiene idea de eso y no actualiza el menú desplegable. Puedo material_selectvolver a llamar cuando cambian las opciones, pero parece que eso no hace nada (se ignora).

En otras palabras, parece que la suposición de diseño detrás de materializar las casillas de selección de CSS es que están todas allí al cargar la página y sus valores nunca cambian.

Implementación . Desde un punto de vista estético, tampoco estoy a favor de la forma en que materialize CSS implementa sus menús desplegables, que consiste en crear un conjunto paralelo de elementos sombreados en algún otro lugar del DOM. Por supuesto, las alternativas como select2 hacen lo mismo, y puede que no haya otra forma de lograr algunos de los efectos visuales (¿de verdad?). Para mí, sin embargo, cuando inspecciono un elemento, quiero ver el elemento, no una versión de sombra en otro lugar que alguien creó mágicamente.

Cuando Ember derriba la vista, no estoy seguro de que materializar CSS derribe los elementos de sombra que ha creado. En realidad, me sorprendería bastante si lo hiciera. Si mi teoría es correcta, a medida que las vistas se generen y eliminen, su DOM terminará contaminándose con docenas de conjuntos de menús desplegables de sombras que no están conectados a nada. Esto se aplica no solo a Ember sino a cualquier otro marco de front-end OPA basado en plantillas / MVC.

Fijaciones . Tampoco he podido averiguar cómo obtener el valor seleccionado en el cuadro de diálogo para vincularlo a algo útil en un marco como Ember que invoca cuadros de selección a través de una {{view 'Ember.Select' value=country}}interfaz de tipo. En otras palabras, cuando se selecciona algo, countryno se actualiza. Este es un factor decisivo.

Olas . Por cierto, los mismos problemas se aplican al efecto "ola" en los botones. Tienes que inicializarlo cada vez que se crea un botón. Personalmente, no me importa el efecto de ola y no entiendo de qué se trata todo este alboroto, pero si quieres olas, ten en cuenta que pasarás una buena parte del resto de tu vida preocupándote por cómo hacerlo. inicializar cada botón cuando se crea.

Aprecio el esfuerzo realizado por los chicos de materialize CSS, y hay algunos efectos visuales agradables allí, pero es demasiado grande y tiene demasiadas trampas como las anteriores para ser algo que yo usaría. Ahora planeo arrancar materializar CSS de mi aplicación y volver a Bootstrap o una capa encima de Suit CSS. Tus herramientas deberían hacer tu vida más fácil, no más difícil.

@ littleguy23 Eso es correcto, pero no desea hacerlo para realizar una selección múltiple. Así que solo un pequeño cambio en el código:

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

Esto funcionó para mí, sin jquery o select wrapper con la clase de entrada, solo material.js y este vanilla js:

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

Como puede ver, obtuve el estilo real de materialize css y no el predeterminado de los navegadores.

Esto también funciona: class = "browser-default"

Si está usando Angularjs, puede usar el complemento angular-materialize , que proporciona algunas directivas útiles. Entonces no necesita inicializar en js, solo agregue material-selecta su selección:

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

La solución que funcionó para mí es llamar a la función 'material_select' después de que se hayan cargado los datos de las opciones. Si imprime el valor de OptionsList.find (). Count () en la consola, primero es 0 y luego unos milisegundos más tarde, la lista se completa con datos.

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

Para mí, ninguna de las otras respuestas funcionó porque estoy usando la última versión de MaterializeCSS y Meteor y hay incompatibilidad entre las versiones de jquery, Meteor 1.1.10 usa jquery 1.11 (anular esta dependencia no es fácil y probablemente romperá Meteor / Blaze) y probar Materialise con jquery 2.2 funciona bien. Consulte https://stackoverflow.com/a/34809976/2882279 para obtener más información.

Este es un problema conocido con menús desplegables y selecciones en materialize 0.97.2 y 0.97.3; para obtener más información, consulte https://github.com/Dogfalo/materialize/issues/2265 y https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Estoy usando la versión Sass de MaterializeCSS en Meteor y solucioné el problema usando poetic: [email protected] en mi archivo de paquetes de meteoritos para forzar la versión anterior. Los menús desplegables ahora funcionan, ¡antiguo jquery y todo!

Llame al código jquery de materialize css solo después de que se haya renderizado el html. Entonces puede tener un controlador y luego disparar un servicio que llama al código jquery en el controlador. Esto hará que el botón de selección esté bien. Sin embargo, si intenta utilizar ngChange o ngSubmit, es posible que no funcione debido al estilo dinámico de la etiqueta de selección.

Solo esto funcionó para mí:

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

Me encontré en una situación en la que usar la solución seleccionada

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

por alguna razón estaba arrojando errores porque no se pudo encontrar la función material_select (). No fue posible decir simplemente <select class="browser-default... porque estaba usando un marco que procesaba automáticamente los formularios. Entonces mi solución fue agregar la clase usando js (Jquery)

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

Primero, asegúrese de inicializarlo en document.ready así:

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

Luego, complételo con sus datos de la manera que desee. Mi ejemplo:

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

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

Asegúrese de que una vez que haya terminado con la población, active este contentChanged así:

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

Para el navegador predeterminado,

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

O la solución Jquery después del enlace t biblioteca Jquery y sus archivos de materialización local / CDN

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

Realmente me gusta este marco, pero qué diablos tener pantalla: ninguno ...

Solo para dar seguimiento a esto, ya que la respuesta principal recomienda no usar materializecss ... en la versión actual de materialize ya no es necesario inicializar selecciones.