Materializar CSS - Selecionar não parece renderizar

Atualmente, estou trabalhando com materializar CSS e parece que fiquei preso nos campos selecionados.

Estou usando o exemplo fornecido pelo site deles, mas infelizmente está renderizando na visualização de qualquer maneira. Fiquei me perguntando se mais alguém poderia ajudar.

O que estou tentando fazer é criar uma linha com 2 espaçadores finais que forneçam preenchimento - então, nos itens de duas linhas internas, deve haver uma entrada de texto de pesquisa e uma lista suspensa de seleção de pesquisa.

Este é o exemplo com o qual estou trabalhando: http://materializecss.com/forms.html

Agradeço antecipadamente.

Aqui está o trecho de código em questão.

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

Como eles substituem o padrão do navegador, o estilo de seleção precisa de Javascript para ser executado. Você precisa incluir o arquivo Materialize Javascript e, em seguida, chamar

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

depois de carregar esse arquivo.

O design de selectfuncionalidade em materializar CSS é, na minha opinião, um bom motivo para não usá-lo.

Você tem que inicializar o elemento select com material_select(), como @ littleguy23 menciona. Caso contrário, a caixa de seleção nem mesmo será exibida! Em um aplicativo jQuery antigo, posso inicializá-lo na função de documento pronto. Adivinhe, nem eu nem muitas outras pessoas estão usando jQuery atualmente, nem inicializamos nossos aplicativos no gancho pronto para documentos.

Seleções criadas dinamicamente . E se eu estiver criando seleções dinamicamente, como acontece em uma estrutura como o Ember, que gera visualizações instantaneamente? Eu tenho que adicionar lógica em cada visão para inicializar a caixa de seleção toda vez que uma visão é gerada, ou escrever um mixin de visão para lidar com isso para mim. E é pior do que isso: quando a visualização é gerada, e em termos de Ember didInsertElementé chamada, a ligação com a lista de opções para a caixa de seleção pode não ter sido resolvida ainda, então eu preciso de uma lógica especial observando a lista de opções para esperar até que seja preenchido antes de fazer a chamada para o material_select. Se as opções mudarem, como poderiam facilmente, material_selectnão tem ideia sobre isso e não atualiza o menu suspenso. Posso ligar material_selectnovamente quando as opções mudam, mas parece que isso não faz nada (é ignorado).

Em outras palavras, parece que a suposição de design por trás de materializar as caixas de seleção do CSS é que todas elas estão lá no carregamento da página e seus valores nunca mudam.

Implementação . Do ponto de vista estético, também não sou a favor da maneira como o CSS implementa seus dropdowns, que é criar um conjunto paralelo de elementos de sombra em algum outro lugar do DOM. Concedido, alternativas como select2 fazem a mesma coisa, e pode não haver outra maneira de obter alguns dos efeitos visuais (sério?). Para mim, porém, quando inspeciono um elemento, quero ver o elemento, não alguma versão de sombra em algum outro lugar que alguém criou magicamente.

Quando o Ember destrói a visualização, não tenho certeza se o CSS materializar destrói os elementos de sombra que ele criou. Na verdade, eu ficaria muito surpreso se isso acontecesse. Se minha teoria estiver correta, conforme as visualizações são geradas e destruídas, seu DOM vai acabar ficando poluído com dezenas de conjuntos de dropdowns de sombra não conectados a nada. Isso se aplica não apenas ao Ember, mas a qualquer outra estrutura de front-end OPA baseada em MVC / template.

Ligações . Eu também não consegui descobrir como obter o valor selecionado na caixa de diálogo para vincular de volta a qualquer coisa útil em uma estrutura como o Ember, que invoca caixas de seleção por meio de uma {{view 'Ember.Select' value=country}}interface de tipo. Em outras palavras, quando algo é selecionado, countrynão é atualizado. Este é um quebra-negócio.

Waves . A propósito, os mesmos problemas se aplicam ao efeito de "onda" nos botões. Você deve inicializá-lo sempre que um botão for criado. Eu, pessoalmente, não me importo com o efeito das ondas e não entendo o porquê de tanto barulho, mas se você quiser ondas, esteja ciente de que passará boa parte do resto da sua vida se preocupando em como inicializar cada botão quando ele for criado.

Agradeço o esforço feito pelos caras do CSS para materializar, e há alguns efeitos visuais legais lá, mas é muito grande e tem muitos truques como os acima para ser algo que eu usaria. Agora estou planejando extrair materializar CSS do meu aplicativo e voltar para o Bootstrap ou uma camada em cima do CSS do Suit. Suas ferramentas devem tornar sua vida mais fácil, não mais difícil.

@ littleguy23 Correto, mas você não quer fazer isso para seleção múltipla. Portanto, apenas uma pequena mudança no código:

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

Isso funcionou para mim, sem jquery ou select wrapper com classe de entrada, apenas material.js e este vanilla js:

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

Como você pode ver, eu tenho o estilo real materialize css e não o padrão do navegador.

Isso também funciona: class = "browser-default"

Se estiver usando Angularjs, você pode usar o plugin angular-materialize , que fornece algumas diretivas úteis. Então você não precisa inicializar no js, ​​apenas adicione material-selectao seu select:

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

A solução que funcionou para mim é chamar a função 'material_select' depois que os dados de opções foram carregados. Se você imprimir o valor de OptionsList.find (). Count () no console, primeiro é 0 e, em seguida, alguns milissegundos depois, a lista é preenchida com dados.

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

Para mim, nenhuma das outras respostas funcionou porque estou usando a versão mais recente de MaterializeCSS e Meteor e há incompatibilidade entre as versões do jquery, o Meteor 1.1.10 usa jquery 1.11 (substituir essa dependência não é fácil e provavelmente quebrará o Meteor / Blaze) e testar o Materialize com jquery 2.2 funciona bem. Consulte https://stackoverflow.com/a/34809976/2882279 para obter mais informações.

Este é um problema conhecido com menus suspensos e seleções em materializar 0.97.2 e 0.97.3; para obter mais informações, consulte https://github.com/Dogfalo/materialize/issues/2265 e https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Estou usando a versão Sass de MaterializeCSS no Meteor e contornei o problema usando poetic: [email protected] em meu arquivo de pacotes de meteoros para forçar a versão antiga. Os menus suspensos agora funcionam, com o velho jquery e tudo!

Chame o código materialize css jquery somente depois que o html for renderizado. Portanto, você pode ter um controlador e, em seguida, disparar um serviço que chama o código jquery no controlador. Isso deixará o botão de seleção correto. No entanto, se você tentar usar ngChange ou ngSubmit, pode não funcionar devido ao estilo dinâmico da tag de seleção.

Só isso funcionou para mim:

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

Eu me vi em uma situação em que usar a solução selecionada

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

por alguma razão estava jogando erros porque a função material_select () não pôde ser encontrada. Não foi possível apenas dizer <select class="browser-default... Porque eu estava usando um framework que renderizou automaticamente os formulários. Então, minha solução foi adicionar a classe usando js (Jquery)

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

Primeiro, certifique-se de inicializá-lo em document.pronto:

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

Em seguida, preencha-o com seus dados da maneira que desejar. Meu exemplo:

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

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

Após terminar com a população, certifique-se de acionar este contentChanged assim:

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

Para o navegador padrão,

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

Ou a solução Jquery após o link para a biblioteca Jquery e seus arquivos local / CDN materializar

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

Eu realmente gosto deste framework, mas o que diabos ter display: nenhum ...

Apenas para acompanhar isso, já que a resposta principal recomenda não usar materializecss ... na versão atual do materialize você não precisa mais inicializar selects.