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

kintone カスタマイズ
1

kintoneの一覧画面で横スクロール時に列を固定するために(https://qiita.com/kiku38/items/6335c24144299f1a76a3)を参考に作ったのですが、縦にスクロールした時に、固定列の見出しが固定されず(見出しがスクロールして消えてしまう)困っています。kintoneではなく、HTMLで画面を作って実行した場合は、問題なく動きました。何な良い方法はないでしょうか?プラグインを使えば類似の動きは出来ますが、使用料も含めていろいろ制約がありますのでJavaScriptで自作できればと思っています。%E3%82%92%E5%8F%82%E8%80%83%E3%81%AB%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81%E7%B8%A6%E3%81%AB%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%97%E3%81%9F%E6%99%82%E3%81%AB%E3%80%81%E5%9B%BA%E5%AE%9A%E5%88%97%E3%81%AE%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%8C%E5%9B%BA%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%9A(%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%8C%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E6%B6%88%E3%81%88%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86)%E5%9B%B0%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82kintone%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%8F%E3%80%81HTML%E3%81%A7%E7%94%BB%E9%9D%A2%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AF%E3%80%81%E5%95%8F%E9%A1%8C%E3%81%AA%E3%81%8F%E5%8B%95%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%E4%BD%95%E3%81%AA%E8%89%AF%E3%81%84%E6%96%B9%E6%B3%95%E3%81%AF%E3%81%AA%E3%81%84%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B?%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%88%E3%81%B0%E9%A1%9E%E4%BC%BC%E3%81%AE%E5%8B%95%E3%81%8D%E3%81%AF%E5%87%BA%E6%9D%A5%E3%81%BE%E3%81%99%E3%81%8C%E3%80%81%E4%BD%BF%E7%94%A8%E6%96%99%E3%82%82%E5%90%AB%E3%82%81%E3%81%A6%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%E5%88%B6%E7%B4%84%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%81%AE%E3%81%A7JavaScript%E3%81%A7%E8%87%AA%E4%BD%9C%E3%81%A7%E3%81%8D%E3%82%8C%E3%81%B0%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

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

2

White 様

 

お世話になります。

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

//5列目を固定

.recordlist-row-gaia>td:nth-child(5),.recordlist-header-cell-gaia:nth-child(5){

    position: sticky;

    left: 0px;

}

3

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

4

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のところで固定 */
  }

5

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