フォームブリッジでテーブルを用いているのですが、テーブル内の各フィールドの横幅を変更したいのですが出来ません。
テーブル内のフィールドの設定内「横幅（例 300px, 20%）」という箇所で横幅を指定出来るようになっており初期値が300pxになっていますが、これを別の数値に変えても反映がされません。
ご確認いただけますでしょうか？
テーブルの表示で横スクロールが表示されていますでしょうか？
もし表示されているなら、表示可能なサイズを超えているため、ブラウザが横幅を自動調整します。
この場合、JSカスタマイズで、テーブルフィールドのDOMを取得し、 table 要素に以下のスタイルを指定すると良いかと思います。
table-layout: fixed;
width: 100%;
以上、参考になりますでしょうか？
落合様
ご回答ありがとうございます。
＞テーブルの表示で横スクロールが表示されていますでしょうか？
はい、されております。
＞この場合、JSカスタマイズで、テーブルフィールドのDOMを取得し、 table 要素に以下のスタイルを指定すると良いかと思います。
勉強不足で申し訳ありませんが、こちら対応方法の詳細をご教示頂いてもよろしいでしょうか？
JSカスタマイズというのは、フォームブリッジの編集画面の「カスタマイズ」という箇所のことでしょうか？そこからどのようにテーブルフィールドのDOMを取得するのかがわかりません。
よろしくお願いいたします。
カスタマイズに関するドキュメントは以下になります。
https://fb.kintoneapp.com/user/customize.html
fb.events.form.mounted イベントで fb.getElementByCode(code) 関数を使って任意のフィールドの要素を取得できます。
その要素の table要素に対して、上記のスタイルを指定すると良いかと思います。
以上、参考になりますでしょうか？
落合様
可能であればサンプルコードを書いて頂けると大変助かります。
よろしくお願いいたします。
落合様
JSコードを下記の通り書いてアップしましたが幅の調整がされません。
(function() {
“use strict”;
fb.events.form.mounted = [function (state){
fb.getElementByCode(tabel)
state.record.tabel.table-layout: fixed;
width: 100%;
}];
})();
こちらご確認頂けますでしょうか？
対象のフィールドコードはTableとなります。
よろしくお願いいたします。
こんな感じでできるかと思います。
(function() {
"use strict";
const fieldCode = '任意のフィールドコード';
fb.events.form.mounted = [function (state) {
const field = fb.getElementByCode(fieldCode);
if (field) {
const tableElements = field.getElementsByTagName('table');
if (tableElements && tableElements.length === 1) {
const tableElement = tableElements[0];
tableElement.style.width = '100%';
tableElement.style.tableLayout = 'fixed';
}
}
return state;
}];
})();
参考になりますでしょうか？
落合様
大変参考になります。ありがとうございます。
頂いたコードはテーブル内全てのフィールドに適用されるコードかと思いますが、
特定のテーブル内フィールドのみ幅の変更をしたい場合どのような記述になりますでしょうか？
度々の質問で申し訳ありませんがご教示頂けますと幸いです。
よろしくお願いいたします。
テーブル内フィールドオブジェクトの style を変更すれば反映されるかと思います。
落合様
フォームブリッジ管理画面上の「テーブル内のフィールドの設定」内、横幅の調整箇所を変更したところ反映されました。ご教示頂きありがとうございます。
ただ、一点問題として、落合様のjsをアップしたところ、PC表示の際は横幅調整がされますが、スマホ表示の際は横幅の調整が働かなくなってしまっています。（jsアップ前はこうなっていませんでした。）
こちら原因と解決法をご教示頂けますと幸いです。
よろしくお願いいたします。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。