Материализация выбора не отображается в модальном

Question

У меня есть модал, который работает правильно, в модале у меня есть поле выбора, как это:

<select name="" id="">
  <option value="">test</option>
  <option value="">test 1</option>
  <option value="">test 2</option>
</select>

Моя инициализация:

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

Вне модальной она работает, так что, возможно, есть некоторые CSSизменения должны быть применены.Правильная работа select вне кода модального выбора при открытии выглядит следующим образом:

<ul id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c4047" class="dropdown-content select-dropdown" tabindex="0" style="display: block; width: 1182.11px; left: 0px; top: -238.984px; height: 284.98px; transform-origin: 0px 100% 0px; opacity: 1; transform: scaleX(1) scaleY(1);"><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40470" tabindex="0" class=""><span>test</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40471" tabindex="0"><span>test 1</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40472" tabindex="0"><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40473" tabindex="0"><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40474" tabindex="0" class=""><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40475" tabindex="0" class="selected"><span>test 2</span></li><li id="select-options-15eef910-6f5c-ea6f-a7e5-1a9eeb3c40476" tabindex="0"><span>test 2</span></li></ul>

Не знаю, как отобразить это читаемое здесь (это мой первый вопрос), так что в основном он сам вычисляет высоту и другие вещи CSS, нов модальном виде это выглядит так: Вот скриншот

И выберите код поля в браузере при открытии:

<ul id="select-options-f505c135-4908-3edb-6944-32b5e7f00630" class="dropdown-content select-dropdown" tabindex="0" style="display: block; width: 584.453px; left: 0px; top: 0px; height: 0px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);"><li class="disabled selected" id="select-options-f505c135-4908-3edb-6944-32b5e7f006300" tabindex="0"><span>Выберите роль</span></li><li id="select-options-f505c135-4908-3edb-6944-32b5e7f006301" tabindex="0"><span>Менеджер</span></li><li id="select-options-f505c135-4908-3edb-6944-32b5e7f006302" tabindex="0"><span>"Покупатель"</span></li><li id="select-options-f505c135-4908-3edb-6944-32b5e7f006303" tabindex="0"><span>Admin</span></li></ul>

Как вы видите, теперь вычисления во всех полях ноль.Искал несколько часов, но не нашел точного ответа в моем случае.

также здесь мой включает:

{{--Material--}} <link href="css/materialize.min.css" rel="stylesheet"> {{-- Material --}} <script src="js/materialize.min.js"></script>

Answer 1

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

$('#select1').formSelect();
$('#select2').formSelect();
$('.select3').formSelect();
$('.tooltipped').tooltip();
$('.tooltipped2').tooltip();

ps Следует отметить, что в основном работают разные элементы с одним и тем же классом, но имейте в виду, что эта ошибка или что-то в этом родеможет случиться.

также использование "лучше", например,

$("#role").formSelect();

, если у вас проблемы с отображением в модальном режиме.

Будет хорошо, если кто-нибудь объяснит мне это,Это какая-то особенность в материализованной библиотеке или что-то еще. Извините, я новичок во внешнем интерфейсе, так что это действительно поможет.