【フォームブリッジ】確認画面のインデント設定(タブレット端末表示時)

kintone カスタマイズ
1

いつもお世話になっております。

タブレット端末でフォームブリッジの確認画面を表示すると、

下図の左側のようにラベルが太字ですべて黒色で項目数が多いとパッと見で確認がしづらいと感じております。

そこで下図右側のようにラベルを青色、回答内容を太字・1段下げる(インデント)ように設定しようと下記の通りCSSを記述してみましたが、インデントだけうまくいきませんでした。

/*ラベル*/
.field .label {
  font-weight: normal !important;
  color: #0008ff !important;
}

/*回答内容*/
.field .column {
  font-weight: bold !important;
  text-indent: -1em !important;
  padding-left: 2em !important;
}

ラベルと回答内容それぞれにtext-indentを書いてみたりもしましたが、ラベルと回答内容をずらす事が出来ませんでした。

フォームブリッジでは右図のようなラベルと回答内容のインデントをずらす事は出来ないのでしょうか。

2

Y.SUGIさん

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

回答内容のセレクタは、「.field .column」ではなく、「.column.field > div」とすると良いかと思います。
http://www.htmq.com/selector/child.shtml

その際、確認画面以外での表示が崩れる場合は、JS側でbody要素にclassを追加するなどして、制御するとよいかと思います。

JavaScript

fb.events.confirm.mounted.push(function (state) {
  document.body.classList.add('confirm-page');
  return state;
});
fb.events.confirm.back.push(function (state) {
  document.body.classList.remove('confirm-page');
  return state;
});
fb.events.confirm.submit.push(function (state) {
  document.body.classList.remove('confirm-page');
  return state;
});

CSS

「.column.field > div」 -> 「.confirm-page .column.field > div」

3

江田篤史様

いつもお世話になっております。

仰る通りセレクタを変えるだけでは表示が崩れてしまいましたので、

JS制御の方法で無事希望通りの表示になりました！

本当にいつもありがとうございます。

4

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