お世話になります。井上と申します。
FormBridgeにてラベル項目と関連する入力項目を上下に並べて配置したいです。
しかし標準機能のままですとラベル項目下部に余白ができてしまい、
ユーザーの見た目上入力項目との関連がわかりにくくなってしまっています。
特定のラベル項目だけではなく、ラベル項目全てに共通して項目下の余白を狭めたく、どのように実装すれば良いか、
サンプルコードをご教示いただけますと幸いです。
下図赤枠部分です。
井上さん
お世話になっております。
個別フィールドのスタイルの変更になるので、JavaScriptカスタマイズで実装すると良いです。
https://form.kintoneapp.com/help/customize
下記のようなコードで実装できるかと思います。
カスタマイズの理解を深める場というdeveloper networkの目的があるため、コードの一部のみ載せております。
下記などを参考に他の要素にもstyleを適用してください。
https://www.ipentec.com/document/javascript-change-element-style
https://developer.mozilla.org/ja/docs/Web/API/ElementCSSInlineStyle/style
https://developer.mozilla.org/ja/docs/Web/CSS/margin
https://developer.mozilla.org/ja/docs/Web/CSS/padding
https://www.sakurasaku-labo.jp/blogs/developer-tools
(function () {
'use strict';
fb.events.form.mounted.push(function (state) {
var fieldCode = 'label'; //ラベルフィールドのフィールドコード
var targetElement = fb.getElementByCode(fieldCode);
var targetLabel = targetElement.getElementsByTagName('label')[0];
var targetRow = targetElement.parentNode;
var nextRow = targetRow.nextElementSibling;
targetElement.style.paddingBottom = 0;
targetElement.style.marginBottom = 0;
// targetLabel等についても同様にstyleを適用する。
// ...
return state;
});
})();
また、ドキュメントの構造に大きく依存したカスタマイズであるため、フォームブリッジの仕様変更により動作しなくなる可能性があります。予めご了承ください。
江田さま
お世話になります。
全てのラベル項目のスタイル変更の場合はCSSと考えておりましたが、
jsで個別に実装すると良いとのこと、ご教示いただきありがとうございます。
いただいたコードを元にラベル項目の下部余白を狭めることができました。
jsでのスタイル設定のコーディングについて、記載いただいたサイトでも勉強します。
井上さん
お世話になっております。
「ラベル項目全て」ということでしたね。申し訳ございません。勘違いしておりました。
ただ、CSSで「ラベルフィールドを持つフォーム行要素」などを選択するのは難しいので、今回はJavaScriptカスタマイズが良さそうですね。
もし、同じ処理を何度も書くのが面倒であれば、フィールドコードを配列で指定して、反復処理させるとよいかと思います。
fb.events.form.mounted.push(function (state) {
var fieldCodes = ['label1', 'label2']; //ラベルフィールドのフィールドコード
fieldCodes.forEach(function (fieldCode) {
var targetElement = fb.getElementByCode(fieldCode);
// ...
targetElement.style.paddingBottom = 0;
// ...
});
return state;
});
江田さま
再度ご回答いただきありがとうございます。
>CSSで「ラベルフィールドを持つフォーム行要素」などを選択するのは難しいので
ラベル項目の要素名をどのように取得すれば良いか苦戦しておりました。
今回はjsにて実装しようと思います。
配列での簡潔なコーディングも教えていただき、ありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。