kviewer リストビュー ヘッダ部固定

kintone カスタマイズ
2

foopiiさん

こんにちは。

 

私の回答をご覧になっていただいてますね。ありがとうございます。

kViewerでもCSSで固定できましたのでご参考ください。

 

ヘッダーコンテンツ（タイトルや検索フォーム）の固定の有無で、テーブルヘッダー（thead th）のtopが変わります。

テーブルヘッダーだけの固定であれば.kv-header の記載は不要です（以下コメントアウトしている通り）。

 

3パターンで試して、値は以下コードのコメントの通りです。

※環境によって異なるかもしれません。お使いの環境に合わせて調整してください。

 

/* ヘッダー（タイトルや検索条件）も固定する場合 */
/* .kv-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 2;
    background-color: rgb(239, 242, 248);
} */

.kv-main {
    overflow: unset; /* overflowを解除しないとstickyが効かない */
}

/* 一覧テーブルヘッダー固定 */
/* テーブルヘッダーのみなら上記.kv-headerは削除して、thead thのtop:0px */
/* タイトルも固定なら上記.kv-headerを記載して、thead thのtop:38px */
/* タイトル＋検索フォームも固定なら上記.kv-headerを記載して、thead thのtop:128px */
thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 1;
}

.v-modal {
    display: none; /* 非表示にしないと検索ポップアップ表示時に前面が暗くなる */
}