renderizado - quitar el javascript que bloquea la visualización de contenido wordpress plugin

Materializar CSS-Seleccionar no parece renderizar

Question

Actualmente estoy trabajando con materializar CSS y parece que me he enganchado con los campos seleccionados.

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

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

Este es el ejemplo del 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>

Answer 1

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

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

Answer 2

Debido a que anulan el valor predeterminado del navegador, 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.

Answer 3

El diseño de la funcionalidad select en materializar CSS es, en mi opinión, una buena razón para no usarlo.

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

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 se llama didInsertElement , el enlace a la lista de opciones para el cuadro de selección puede no haberse resuelto todavía, por lo que necesito una lógica especial observando la lista de opciones para esperar hasta se llena antes de hacer la llamada a material_select . Si las opciones cambian, como podrían fácilmente, material_select no tiene idea de eso y no actualiza el menú desplegable. Puedo llamar a material_select nuevamente cuando las opciones cambian, pero parece que eso no hace nada (se ignora).

En otras palabras, parece que la suposición de diseño detrás de materializar los cuadros de selección de CSS es que todos están 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 materializar CSS implementa sus menús desplegables, que es crear un conjunto paralelo de elementos paralelos en 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 (¿en serio?). Sin embargo, para mí, cuando inspecciono un elemento, quiero ver el elemento, no alguna versión oculta en otro lugar que alguien haya creado mágicamente.

Cuando Ember derriba la vista, no estoy seguro de que materializar CSS derriba los elementos de sombra que ha creado. En realidad, me sorprendería bastante si lo hace. Si mi teoría es correcta, a medida que se generan y destruyen las vistas, su DOM terminará contaminado 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 front-end OPA basado en MVC / plantilla.

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 un tipo {{view ''Ember.Select'' value=country}} interfaz. En otras palabras, cuando se selecciona algo, el country no se actualiza. Esto es un factor decisivo.

Olas Por cierto, los mismos problemas se aplican al efecto de "onda" en los botones. Debe inicializarlo cada vez que se crea un botón. Personalmente, no me importa el efecto de onda, 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 Inicializa cada botón cuando se crea.

Aprecio el esfuerzo realizado por los chicos de CSS materializados, y hay algunos efectos visuales agradables allí, pero es demasiado grande y tiene demasiados problemas como los anteriores para ser algo que usaría. Ahora estoy planeando extraer materializar CSS de mi aplicación y volver a Bootstrap o una capa encima de Suit CSS. Sus herramientas deberían hacer su vida más fácil, no más difícil.

Answer 4

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

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

Como puede ver, obtuve el estilo real de css materializado y no los navegadores predeterminados.

Answer 5

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

Answer 6

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 opciones. Si imprime el valor de OptionsList.find (). Count () en la consola, primero es 0 y luego unos milisegundos después, la lista se llena de datos.

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

};

Answer 7

Llame al código css jquery materialize solo después de que se haya procesado 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 usar ngChange o ngSubmit, es posible que no funcione debido al estilo dinámico de la etiqueta de selección.

Answer 8

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

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

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

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

Answer 9

Para el navegador predeterminado,

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

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

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

Realmente me gusta este marco, pero qué demonios mostrar: ninguno ...

Answer 10

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 Materialize con jquery 2.2 funciona bien. Consulte https://.com/a/34809976/2882279 para obtener más información.

Este es un problema conocido con los menús desplegables y selectos en materializar 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. ¡Las listas desplegables ahora funcionan, viejo jquery y todo!

Answer 11

Primero, asegúrese de inicializarlo en el documento. Listo así:

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

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

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

Asegúrese de que después de que haya terminado con la población, active este contenido Cambiado así:

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

Answer 12

Si está utilizando Angularjs, puede utilizar el complemento de material angular , que proporciona algunas directivas útiles. Entonces no necesita inicializar en el js, solo agregue material-select a 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>

Answer 13

Solo esto funcionó para mí:

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

Answer 14

Solo para seguir con esto, ya que la respuesta principal recomienda no usar materializecss ... en la versión actual de materialize ya no necesita inicializar selecciones.