新規投稿
フォローする

フォームブリッジ テーブル横幅について

フォームブリッジでテーブルを用いているのですが、テーブル内の各フィールドの横幅を変更したいのですが出来ません。

テーブル内のフィールドの設定内「横幅(例 300px, 20%)」という箇所で横幅を指定出来るようになっており初期値が300pxになっていますが、これを別の数値に変えても反映がされません。

ご確認いただけますでしょうか?

0

9件のコメント

Avatar
落合 雄一

テーブルの表示で横スクロールが表示されていますでしょうか?

もし表示されているなら、表示可能なサイズを超えているため、ブラウザが横幅を自動調整します。

 

この場合、JSカスタマイズで、テーブルフィールドのDOMを取得し、 table 要素に以下のスタイルを指定すると良いかと思います。

table-layout: fixed;
width: 100%;

 

以上、参考になりますでしょうか?

0
Avatar
栗原龍一

落合様

ご回答ありがとうございます。

>テーブルの表示で横スクロールが表示されていますでしょうか?

はい、されております。

>この場合、JSカスタマイズで、テーブルフィールドのDOMを取得し、 table 要素に以下のスタイルを指定すると良いかと思います。

勉強不足で申し訳ありませんが、こちら対応方法の詳細をご教示頂いてもよろしいでしょうか?
JSカスタマイズというのは、フォームブリッジの編集画面の「カスタマイズ」という箇所のことでしょうか?そこからどのようにテーブルフィールドのDOMを取得するのかがわかりません。

よろしくお願いいたします。

0
Avatar
落合 雄一

カスタマイズに関するドキュメントは以下になります。

https://fb.kintoneapp.com/user/customize.html

 

fb.events.form.mounted イベントで fb.getElementByCode(code) 関数を使って任意のフィールドの要素を取得できます。
その要素の table要素に対して、上記のスタイルを指定すると良いかと思います。

 

以上、参考になりますでしょうか?

0
Avatar
栗原龍一

落合様

可能であればサンプルコードを書いて頂けると大変助かります。

よろしくお願いいたします。

0
Avatar
栗原龍一

落合様

JSコードを下記の通り書いてアップしましたが幅の調整がされません。

(function() {
"use strict";
fb.events.form.mounted = [function (state){
fb.getElementByCode(tabel)
state.record.tabel.table-layout: fixed;
width: 100%;
}];
})();

こちらご確認頂けますでしょうか?

対象のフィールドコードはTableとなります。

よろしくお願いいたします。

0
Avatar
落合 雄一

こんな感じでできるかと思います。

 

(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;
}];
})();

 

参考になりますでしょうか?

0
Avatar
栗原龍一

落合様

大変参考になります。ありがとうございます。

頂いたコードはテーブル内全てのフィールドに適用されるコードかと思いますが、

特定のテーブル内フィールドのみ幅の変更をしたい場合どのような記述になりますでしょうか?

度々の質問で申し訳ありませんがご教示頂けますと幸いです。

よろしくお願いいたします。

0
Avatar
落合 雄一

テーブル内フィールドオブジェクトの style を変更すれば反映されるかと思います。

0
Avatar
栗原龍一

落合様

フォームブリッジ管理画面上の「テーブル内のフィールドの設定」内、横幅の調整箇所を変更したところ反映されました。ご教示頂きありがとうございます。

ただ、一点問題として、落合様のjsをアップしたところ、PC表示の際は横幅調整がされますが、スマホ表示の際は横幅の調整が働かなくなってしまっています。(jsアップ前はこうなっていませんでした。)

こちら原因と解決法をご教示頂けますと幸いです。

よろしくお願いいたします。

0
ログインしてコメントを残してください。