Materialise CSS select shows cut off

我有一些使用Materialise CSS的代碼。我想用15個選項顯示一個選擇，但是當我選擇它時會被切斷。容器中的代碼位於主標籤內。Materialise CSS select shows cut off

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

來源

2016-08-12 DANIELBMZ

可能相關：http://stackoverflow.com/questions/28258106/materialize-css-select-doesnt-seem-to-render/28259097#28259097 – 2016-08-12 19:02:55

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

來源

2016-08-12 19:00:00 Adam

但是，如果我把一個實現卡片出現在250像素以下 – DANIELBMZ

Materialise CSS select shows cut off

回答

相關問題