Текстовое поле Material Design Lite в ранее скрытом div

Итак, я обновляю свой веб-сайт, чтобы использовать Google MDL, и переживаю время, когда знаю, что не должен этого делать.

У меня есть 2 идентичных div, оба содержат текстовое поле с тегом MDL. Единственное отличие состоит в том, что div B скрыт (с использованием класса, называемого «скрыть», с css display:none).

   <div id='a'>
     <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
     </div>
   </div>

   <div id='b' class='hide'>
     <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
     </div>
   </div>

Когда страница загружается, текстовое поле в div A имеет стиль MDL, как и ожидалось. Когда я показываю div B через $('#b').show(), текстовое поле не отображает стиль MDL.

Как получить текстовое поле в div B, чтобы к нему применялось форматирование MDL?

Вызов componentHandler.upgradeDom(); после отображения div B ничего не делает.

Спасибо за твою помощь!


material-design-lite
person nickc    schedule 01.03.2016    source источник
comment
Какой браузер вы используете? У меня проблемы с Safari при динамическом добавлении контента и вызове upgradeDom(), тогда как Chrome работает нормально.   -  person acuth    schedule 02.03.2016
comment
хром. Приведенный ниже хак от @ASmith, кажется, работает в моем случае.   -  person nickc    schedule 03.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я запускаю следующий скрипт, когда вношу изменения в пользовательский интерфейс во время выполнения. Сам скрипт извлечен из MDL material.js, и пока кажется, что он работает. Попробуйте вызвать этот скрипт после того, как ваш код отобразит пользовательский интерфейс или после запуска события «change». Удачи!

function registerMaterialLite() 
            {
                'use strict';
                if ('classList' in document.createElement('div') && 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach) 
                {
                    document.documentElement.classList.add('mdl-js');
                    componentHandler.upgradeAllRegistered();
                } 
                else 
                {
                    componentHandler.upgradeElement = function() {};
                    componentHandler.register = function() {};
                }
            }
person ASmith    schedule 02.03.2016