kintone/モバイル画面でのサブテーブル行高さについて

[yosuke (北陽介)]

お世話になっております。
kintone/モバイル画面のサブテーブルについて、テーブル上表示フィールドの高さ+「行を追加する」「行を削除する」ボタン含め、標準より行間詰めと1行辺りの高さを変更したいと考えております。

css不精通の為、AI経由で以下の様なcssを適用したのですが変化なく、記載cssへの誤り等御座いましたら、アドバイスいただければ幸いです。

/* モバイル詳細画面・編集画面のテーブル行高さを調整 */
.gaia-mobile-app-subtable .row {
    min-height: 40px !important; /* 行の最小高さ */
    height: 40px !important;     /* 行の固定高さ */
}

/* セル内のパディングを調整してさらにコンパクトに */
.gaia-mobile-app-subtable .row .cell {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 必要であれば、特定のフィールドタイプに限定することも可能 */
/* 例: テーブル内のテキストボックスの高さ */
.gaia-mobile-app-subtable .row .cell input[type="text"] {
    height: 30px !important;
}

[mura]

そもそも、どういう風に適用をかんがえてますか？
PC版のCSS変更は可能ですが、モバイル版のCSSの変更はできないので…

ただ、JavaScriptによるカスタマイズは、PC/モバイルともにできるので、
JSからスタイルを適用するということは可能です。
下記のようになるとおもいます

(function() {
  'use strict';

  kintone.events.on([
    'mobile.app.record.create.show',
    'mobile.app.record.edit.show'
  ], function(event) {

    const styleId = 'custom-subtable-compact';
    if (document.getElementById(styleId)) return event;

    const style = document.createElement('style');
    style.id = styleId;
    style.textContent = `
      .subtable-row-gaia {
        padding: 4px 6.5px !important;
      }
      .forms-text-gaia {
        height: 26px !important;
        padding: 2px 6px !important;
        font-size: 13px !important;
      }
      .subtable-row-gaia .control-gaia {
        margin-bottom: 2px !important;
      }
      .subtable-row-gaia .control-label-gaia {
        margin-bottom: 2px !important;
        font-size: 12px !important;
      }
      .subtable-row-buttons-gaia {
        height: 32px !important;
        line-height: 32px !important;
        padding: 0 !important;
      }
    `;
    document.head.appendChild(style);

    return event;
  });

})();

[yosuke (北陽介)]

mura様

ご回答頂き、誠に有難う御座います。
モバイル版css編集不可という初歩知識を認識出来ておりませんでした。申し訳ございません。

頂いたjsにて行高さや「行を追加する」ボタン高さの変更が出来ました。

2点ご質問させて頂きたいのですが、本js反映にて添付画像の様にテーブル内「入庫数」フィールドは高さ変動無し、「資材No」「表示資材名称」は変動ありとなりました。
入庫数は数値フィールド、残2フィールドは文字列なのですが、文字列のみ変動しているのは「.forms-text-gaia」のtextが関与しているのでしょうか？

また、「行を追加する」箇所について、行高さは変動に対し内部の「行を追加する」文字がはみ出ておりますが、こちらを変更した行高さ内に収めたい場合は、どの様なjs既述になりますでしょうか？

質問ばかりで恐縮ですが、ご教授いただければ幸いです。

[mura]

多分調整となると細かくみていかないといけないので、やり方をおつたえしますね！

数値フィールドに効かない件と「行を追加する」ボタンのはみ出しは、どちらもCSSのクラス名を調べれば同じ要領で対応できます。

クラス名の調べ方ですが、Chrome のデベロッパーツールを使います。対象の要素を右クリック
→「検証」で、そのフィールドに当たっているクラス名が確認できます。詳しい使い方はこちらが参考になります!

Google Chrome開発者ツールのTips集 -DOM要素編-

数値フィールドを検証すると、文字列の .forms-text-gaia とは別のクラス名が使われているはずなので、そちらにも同じスタイルを当てればOKです。「行を追加する」ボタンも同様に確認してみてください。

[yosuke (北陽介)]

mura様

お世話になっております。
ご回答、誠に有難う御座います。

CSSクラス名の調べ方についてもご教授頂き、有難う御座いました。
頂きましたTips集を確認し、調整してみます。

様々、詳細ご説明頂き、誠に有難う御座いました。