Materialize CSS 선택 쇼가 자르다

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

당신은 확실히 항상 모든 옵션을 표시하기 위해 드롭 다운 메뉴에 최소 높이를 설정할 수

.

편집 : 카드에 포장했는데 의도 한대로 작동합니다.

$('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>