マテリアライズスクロールの問題を選択

Question

私は非常に多くのオプションで選択を使用するWebアプリケーションで作業しています。問題は、MaterializeCSSのselectがスクロール可能であるように見えるため、いくつかのオプションが画面に表示されないことです。これをどうやって解決するのですか？

HTMLやPHP、私はクレジットを主張することはできませんので、他のウェブサイト上でこれを見つけた

<div class="main container"> 
<div class="section"> 
    ... 
    ... 
    <div class="row"> 
    <div class="input-field col s12 m8 offset-m2 l6 offset-l3"> 
     <select> 
     <option value="" disabled selected>Choose a degree program</option> 
     <?php 
     foreach ($degrees as $degree){ 
      echo '<option value="'.$degree.'">'.$degree.'</option>'; 
     } 
     ?> 
     </select> 
     <label>Degree program</label> 
    </div> 
    </div> 
</div> 
</div> 

CSS

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 
.main { 
    flex: 1 0 auto; 
} 

Answer 1

 .select-dropdown{ 
     overflow-y: auto !important; 
    } 

。 Final comment on this page

Answer 2

.dropdown-contentはmaterialize.cssで見つけてください。

max-height:650pxが表示され、ドロップダウンボックスサイズにしたいものを削除/更新します。

私のプロジェクトでこのスタイルが修正されました。 これは大丈夫です！おかげで.....

materialize.cssで削除/更新max-height:650pxプロパティの前に Before

.dropdown-content { 
    max-height: 650px; 
} 

そして私は、最大の高さをカスタマイズ：materialize.cssで250ピクセル After

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