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

kintone カスタマイズ
1

お世話になっております。

kviewerリストビューをスクロールした際にヘッダ行を固定したいのですが、できません。

kintoneでのやり方は見つかったのですが、kviewerでのやり方をどなたか教えてください。

https://developer.cybozu.io/hc/ja/community/posts/4414093870873-%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%81%AB%E3%81%A6%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E8%A1%8C%E3%82%92%E5%9B%BA%E5%AE%9A%E3%81%97%E3%81%9F%E3%81%84

よろしくおねがいいたします。

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; /* 非表示にしないと検索ポップアップ表示時に前面が暗くなる */
}

 

3

koichi様

ご回答ありがとうございます！

頂いた内容で実現できました！非常に助かりました！

ありがとうございます！！

また何かありましたら、ぜひよろしくお願いいたします！

4

900225082446様

上の記事を見て、以下CSSをkViewerに読み込ませたのですが、
テーブルのヘッダーを上部に固定させることが出来ませんでした
(タイトルと、検索フォームは、上部に固定させることが出来ました)。

テーブルヘッダー（thead th）のtop値を、いろいろイジってみたりはしたのですが、上手くいかず…。
どこか、間違っているのでしょうか？

Chromeを使っています。

/* ヘッダー（タイトルや検索条件）も固定する場合 */
.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: 128px;
z-index: 1;
}

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

CSSを読み込むと、
下の画像のように、テーブルヘッダー（thead th）の位置が、テーブルの内側に入ってしまいます。

5

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。