Материализовать CSS - выберите "Не похоже на рендеринг"

В настоящее время я работаю с материализацией CSS, и, похоже, я зацепился за поля выбора.

Я использую пример, предоставленный с их сайта, но, к сожалению, он вообще отображается в представлении. Мне было интересно, может ли кто-нибудь помочь.

Что я пытаюсь сделать, так это создать строку с двумя концевыми разделителями, которые обеспечивают заполнение - тогда внутри двух внутренних элементов строки должны быть ввод текста для поиска и раскрывающийся список выбора поиска.

Это пример, с которым я работаю: http://materializecss.com/forms.html

Заранее спасибо.

Вот фрагмент рассматриваемого кода.

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

Поскольку они переопределяют настройки браузера по умолчанию, для стилей выбора требуется запуск Javascript. Вам нужно включить файл Materialize Javascript, а затем вызвать

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

после того, как вы загрузили этот файл.

На selectмой взгляд, создание функциональности в материализованном CSS - это довольно веская причина не использовать его.

Вы должны инициализировать элемент select с помощью material_select(), как упоминает @ littleguy23. Если вы этого не сделаете, поле выбора даже не отобразится! В старомодном приложении jQuery я могу инициализировать его в функции готовности документа. Угадайте, что ни я, ни многие другие люди в наши дни не используют jQuery, и мы не инициализируем наши приложения в ловушке готовности документа.

Динамически созданные выборки . Что, если я создаю выборки динамически, например, в такой среде, как Ember, которая генерирует представления на лету? Мне нужно добавить логику в каждое представление, чтобы инициализировать поле выбора каждый раз, когда представление создается, или написать миксин представления, чтобы обрабатывать это за меня. И еще хуже: когда создается представление и вызывается в терминах Ember didInsertElement, привязка к списку параметров для поля выбора, возможно, еще не решена, поэтому мне нужна специальная логика, наблюдающая за списком параметров, чтобы ждать, пока он заполняется перед вызовом material_select. Если параметры меняются, что легко может быть, material_selectне знает об этом и не обновляет раскрывающийся список. Я могу позвонить material_selectснова, когда параметры меняются, но, похоже, это ничего не делает (игнорируется).

Другими словами, похоже, что проектное предположение, лежащее в основе материализованных полей выбора CSS, заключается в том, что все они присутствуют при загрузке страницы, и их значения никогда не меняются.

Реализация . С эстетической точки зрения, я также не сторонник того, как материализация CSS реализует свои раскрывающиеся списки, то есть для создания параллельного теневого набора элементов где-то еще в DOM. Конечно, альтернативы, такие как select2, делают то же самое, и может не быть другого способа добиться некоторых визуальных эффектов (правда?). Однако для меня, когда я проверяю элемент, я хочу видеть этот элемент, а не какую-то теневую версию где-то еще, которую кто-то волшебным образом создал.

Когда Ember срывает представление, я не уверен, что материализация CSS срывает созданные им теневые элементы. На самом деле, я был бы очень удивлен, если бы это произошло. Если моя теория верна, поскольку представления генерируются и удаляются, ваша DOM в конечном итоге будет загрязнена десятками наборов раскрывающихся списков теней, не связанных ни с чем. Это относится не только к Ember, но и к любой другой интерфейсной платформе OPA на основе MVC / шаблонов.

Привязки . Я также не смог понять, как получить значение, выбранное в диалоговом окне, для привязки к чему-либо полезному в такой платформе, как Ember, которая вызывает поля выбора через {{view 'Ember.Select' value=country}}интерфейс типа. Другими словами, когда что-то выбрано, countryне обновляется. Это нарушитель сделки.

Волны . Кстати, те же проблемы касаются эффекта «волны» на кнопках. Вы должны инициализировать его каждый раз, когда создается кнопка. Меня лично не волнует волновой эффект, и я не понимаю, о чем идет речь, но если вам действительно нужны волны, имейте в виду, что вы потратите значительную часть остатка своей жизни, беспокоясь о том, как инициализировать каждую кнопку при ее создании.

Я ценю усилия, приложенные ребятами из Materialise CSS, и там есть несколько хороших визуальных эффектов, но он слишком велик и содержит слишком много подводных камней, таких как вышеупомянутый, чтобы я мог использовать его. Теперь я планирую вырвать материализацию CSS из своего приложения и вернуться либо к Bootstrap, либо к слою поверх Suit CSS. Ваши инструменты должны облегчить вам жизнь, а не усложнить ее.

@ littleguy23 Это правильно, но вы не хотите использовать множественный выбор. Итак, небольшое изменение в коде:

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

Это сработало для меня, без jquery или select-оболочки с классом ввода, просто material.js и этот vanilla js:

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

Как вы можете сказать, я получил реальный стиль материализации css, а не стандартные браузеры.

Это тоже работает: class = "browser-default"

Если вы используете Angularjs, вы можете использовать плагин angular-materialize , который предоставляет несколько удобных директив. Тогда вам не нужно инициализировать js, просто добавьте material-selectв свой выбор:

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

Решение, которое сработало для меня, - это вызов функции 'material_select' после загрузки данных параметров. Если вы распечатаете значение OptionsList.find (). Count () на консоль, сначала оно будет равно 0, а через несколько миллисекунд список будет заполнен данными.

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

Для меня ни один из других ответов не сработал, потому что я использую последнюю версию MaterializeCSS и Meteor, и между версиями jquery существует несовместимость, Meteor 1.1.10 использует jquery 1.11 (переопределение этой зависимости непросто и, вероятно, сломает Meteor / Blaze) и тестирование Materialize с jquery 2.2 работает нормально. См. Https://stackoverflow.com/a/34809976/2882279 для получения дополнительной информации.

Это известная проблема с раскрывающимися списками и выборами в материализованных версиях 0.97.2 и 0.97.3; для получения дополнительной информации см. https://github.com/Dogfalo/materialize/issues/2265 и https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Я использую Sass-версию MaterializeCSS в Meteor и обошел проблему, используя poetic: materialize-scss@1.97.1 в моем файле пакетов meteor, чтобы принудительно установить старую версию. Выпадающие списки теперь работают, старый jquery и все такое!

Вызывайте код материализации css jquery только после рендеринга html. Таким образом, у вас может быть контроллер, а затем запускать службу, которая вызывает код jquery в контроллере. Это сделает кнопку выбора правильной. Однако, если вы попытаетесь использовать ngChange или ngSubmit, это может не сработать из-за динамического стиля тега select.

Только это сработало для меня:

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

Я оказался в ситуации, когда с помощью выбранного решения

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

по какой-то причине выдавал ошибки, потому что не удалось найти функцию material_select (). Невозможно было просто сказать, <select class="browser-default... потому что я использовал фреймворк, который автоматически отрисовывал формы. Итак, моим решением было добавить класс с помощью js (Jquery)

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

Во-первых, убедитесь, что вы инициализировали его в document.ready следующим образом:

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

Затем заполните его своими данными так, как хотите. Мой пример:

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

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

Убедитесь, что после того, как вы закончите с населением, этот contentChanged активирован следующим образом:

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

Для браузера по умолчанию

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

Или решение JQuery после ссылки t Библиотека JQuery и ваши локальные / CDN файлы материализации

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

Мне очень нравится этот фреймворк, но что за дисплей: нет ...

Просто чтобы следить за этим, поскольку в верхнем ответе рекомендуется не использовать materializecss ... в текущей версии materialize вам больше не нужно инициализировать выборки.