materialize css select optionnya gk keliatan waktu di foreach

gan saya punya masalh nihh, masalah di materialize css di bagian selectnya, waktu saya buat materialize selectnya pake data statis semuanya lancar baik2 aja tapi pas saya bikin dia dinamis ada masalah gan, masalahnya pas saya klik optionnya buat di pilih ehh optionnya malah gk keliatan tapi pas kalo saya klik biar nge dropdown datanya udah ada di option tapi pas saya klik optionnya datanya malah gk keliatan, trus lagi kalo di tampilan smarphone mau datanya keliatan tapi dia kesamping kanan datanya. tolong dong gan

ini selectnya pas belum di klik

pas di klik keluar dropdown datanya

pas udah saya klik option nya malah gk keliatan optionnya

ini kode di bladenya

<div class="input-field">
 <select name="roleUser" id="roleUser">
  <option selected disabled>List role user</option>
   @foreach ($role_user as $roleUser)
    <option>
     {{ $roleUser->ranking_user }}
    </option>
   @endforeach
 </select>
</div>

ini kode di app.js nya

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