Materialize select not displaying in modal

Question

I have modal that works correctly, inside modal i have select field like this:

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

My initialization:

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

Outside modal it works, so maybe there some css changes need to be applied. Proper working select outside modal select code when opened looks like this:

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

Don't know how to display that readable here(it's my first question) so basically, it calculates height and other css stuff itself but in modal it looks like this: Here screenshot

And select field code in browser when opened:

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

As you see now calculations in all fields zero. Searched few hours but didn't find exact answer in my case.

also here my includes:

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

Answer 1

so i figured it out myself, as i have few select on my page, but in this case i had only one, anyway the best way to make all materialize select, tooltip and other stuff work from jquery and especially when you have few of each element, better give different class or id for each.

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

p.s. i should mention that mostly different element with same class also work, but keep in mind that this bug or whatever it is like mine can happen.

also using " is better for e.g.

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

if you have problem with displaying in modal.

It will be good if someone explain me this, is it some feature in materialize library or something else.Sorry I'm new in frontend, so that will really help.