新規投稿
フォローする

キントーン一覧画面の見出し固定のカスタマイズについて

kintoneの一覧画面で横スクロール時に列を固定するために(https://qiita.com/kiku38/items/6335c24144299f1a76a3)を参考に作ったのですが、縦にスクロールした時に、固定列の見出しが固定されず(見出しがスクロールして消えてしまう)困っています。kintoneではなく、HTMLで画面を作って実行した場合は、問題なく動きました。何な良い方法はないでしょうか?プラグインを使えば類似の動きは出来ますが、使用料も含めていろいろ制約がありますのでJavaScriptで自作できればと思っています。

FixedMidashiサイトで仕様を確認すると行も列も固定する場合は①②③のテーブルを作成して見出しを固定するように書かれていますが、③のテーブルが固定されずにスクロールするような現象のように思われます。ご教示よろしくお願いいたします。

0

3件のコメント

Avatar
daikonsan

White 様

 

お世話になります。

自分もまだまだ初心者のためまともなコードではないですが、CSSで固定はいかがでしょうか。

//5列目を固定

.recordlist-row-gaia>td:nth-child(5),.recordlist-header-cell-gaia:nth-child(5){
    position: sticky;
    left: 0px;
}
0
Avatar
White

当方全くの初心者で試行錯誤しています。ご教示していただいたCSSで固定でやってみたいと思います。

1
Avatar
White

daikonsan 様

お世話になります。

html、cssは少しかじった程度でVavaScriptは全くの初心者です。

7月からExcel(VBA)を使った仕組みからキントーンへの移行をすすめていますが、Excelだと基本機能+VBAで何でもできてしまいますが、kintoneの基本機能だけではExcelのように行かずいろいろ試していました。

キントーンの一覧画面のスクロール制御は、ご教示いただいたCSS制御で作る事ができました。誠にありがとうございました。

一覧画面に集計行も追加したので、当該クラス名を指定して下記のようにCSSを作ってみました。これで動いたので良しとしました。

また、入力画面については、ルックアップを使ってマスターデータファイル(アプリ)との連携とVavaScriptを使って入力画面のフィールド値の計算・書込みを行うようにして何とか使える仕組みができました。

キントーンの一覧画面のスクロール制御cssコード

.recordlist-row-gaia:nth-child(2n+1) > td {
    background-color: #f5f5f5;
}
.total-row:nth-child(2n+1) > td {
    background-color: #f5f5f5;
}

.recordlist-row-gaia>td,.recordlist-header-cell-gaia {
    background-color: #fff;
}

.total-row>td,.recordlist-header-cell-gaia {
    background-color: #fff;
}


.total-row>td:nth-child(1),.recordlist-header-cell-gaia:nth-child(1){ position: sticky; left: 0px; width: 40px !important; }
.total-row>td:nth-child(2),.recordlist-header-cell-gaia:nth-child(2){ position: sticky; left: 40px; width: 100px !important; }
.total-row>td:nth-child(3),.recordlist-header-cell-gaia:nth-child(3){ position: sticky; left: 140px; width: 100px !important; }


.recordlist-row-gaia>td:nth-child(1),.recordlist-header-cell-gaia:nth-child(1){ position: sticky; left: 0px; width: 40px !important; }
.recordlist-row-gaia>td:nth-child(2),.recordlist-header-cell-gaia:nth-child(2){ position: sticky; left: 40px; width: 100px !important; }
.recordlist-row-gaia>td:nth-child(3),.recordlist-header-cell-gaia:nth-child(3){ position: sticky; left: 140px; width: 100px !important; }
.recordlist-header-cell-gaia:nth-child(1){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(2){ z-index:1; }
.recordlist-header-cell-gaia:nth-child(3){ z-index:1; }

.total-row:nth-child(1){ z-index:1; }
.total-row:nth-child(2){ z-index:1; }
.total-row:nth-child(3){ z-index:1; }

行固定も下記のコードでやってみました。

.total-row{
  background-color: #00FF00;
  position: -webkit-sticky; /* safari対応 */
  position: sticky;
  top: 100px;//* 上端から100pxのところで固定 */
  }

1
サインインしてコメントを残してください。