Materializeで固定ヘッダーを使用してコレクションを作成する方法

マテリアライズコレクションの固定ヘッダーを作成しようとしています。私はそれを位置でスタイルします：これはヘッダーを小さくし、ヘッダーの下のコレクションの最初の要素にしました。Materializeで固定ヘッダーを使用してコレクションを作成する方法

.collection-header { 
    position: fixed; 
}

これは、私はあなたがスタイルに、それは非常に簡単になりますどの完全ULからヘッダを削除することができexample

出典

2017-11-20 Bilal Djaghout

を得るものです。下記を参照し、それが役立つことを願ってください私はそれを試してみましょう

https://plnkr.co/edit/7xPQJNjmvn0qIQbSlmV2?p=preview

HTML

<html> 

    <head> 
    <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="collection-header"> 
      <h4>First Names</h4> 
     </div> 
     <ul class="collection with-header"> 
     <li class="collection-item">Fisrt</li> 
     <li class="collection-item">Second</li> 
     <li class="collection-item">Third</li> 
     <li class="collection-item">Fourth</li> 
     <li class="collection-item">Fisrt</li> 
     <li class="collection-item">Second</li> 
     <li class="collection-item">Third</li> 
     <li class="collection-item">Fourth</li> 
     <li class="collection-item">Fisrt</li> 
     <li class="collection-item">Second</li> 
     <li class="collection-item">Third</li> 
     <li class="collection-item">Fourth</li> 
     </ul> 
    </div> 
    </body> 

</html>

CSS

.collection { 
    height: calc(100vh/4) !important; 
    overflow-y: auto; 
    margin-top:0; 
} 

.collection-header { 
    position: relative; 
    border-left:1px solid #e0e0e0; 
    border-top:1px solid #e0e0e0; 
    border-right:1px solid #e0e0e0; 
    padding-left:27px; 
} 
.collection-header h4 { 
    margin-bottom: 0; 
    padding-bottom: 12px; 
}

出典

2017-11-20 17:13:31

たTHXメイト。しかし、私はコレクションヘッダーのサイズの問題を解決しないと思う。 –

@BilalDjaghout問題はありません。ヘッダーのサイズに関する問題についてもう少し説明してください。それはすべてが同じサイズであるように私に見えるので。ヘッダーセルの幅を他のセルと同じにすることを意味しますか？ –

@BilalDjaghoutもしそうなら...あなたはこのような小さなjQueryを使って幅を設定できます。https://plnkr.co/edit/p7GwbsmdwswOHGJ0uWDv?p=preview –

Materializeで固定ヘッダーを使用してコレクションを作成する方法

答えて

関連する問題