Материализация CSS select показывает отрезанные

Question

У меня есть код с использованием Materialize CSS. Я хочу показать выбор с 15 вариантами, но когда я выбираю, он отключается. Код в контейнере находится внутри основного тега.

\t  $('select').material_select();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t <div class="input-field col s12 m6"> 
 
\t  <select> 
 
\t  <option selected="" disabled="" value="">Choose your option</option> 
 
\t  <option value="1">Option 1</option> 
 
\t  <option value="2">Option 2</option> 
 
\t  <option value="3">Option 3</option> 
 
\t  <option value="4">Option 4</option> 
 
\t  <option value="5">Option 5</option> 
 
\t  </select> 
 
\t  \t <label>Browser Select</label> 
 
\t </div> 
 
\t </div> 
 
</div>

Answer 1

Вы можете установить мин-высоту в раскрывающемся меню, чтобы убедиться, что она всегда отображает все ваши варианты.

EDIT: Я завернул его в карточку, похоже, что он все еще работает по назначению.

$('select').material_select();

.dropdown-content { 
 
    min-height:250px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t <div class="input-field col s12 m6"> 
 
      <div class="card blue-grey darken-1"> 
 
      <div class="card-content white-text"> 
 
       <span class="card-title">Browser Select</span> 
 
\t  <select> 
 
\t  <option selected="" disabled="" value="">Choose your option</option> 
 
\t  <option value="1">Option 1</option> 
 
\t  <option value="2">Option 2</option> 
 
\t  <option value="3">Option 3</option> 
 
\t  <option value="4">Option 4</option> 
 
\t  <option value="5">Option 5</option> 
 
       <option value="6">Option 6</option> 
 
\t  <option value="7">Option 7</option> 
 
\t  <option value="8">Option 8</option> 
 
\t  <option value="9">Option 9</option> 
 
\t  <option value="10">Option 10</option> 
 
       <option value="11">Option 11</option> 
 
       <option value="12">Option 12</option> 
 
       <option value="13">Option 13</option> 
 
       <option value="14">Option 14</option> 
 
       <option value="15">Option 15</option> 
 
\t  </select> 
 
       </div> 
 
      </div> 
 
\t </div> 
 
\t </div> 
 
</div>