【フォームブリッジ】テーブル内の日付項目の横幅の縮小方法について

kintone カスタマイズ
1

以下の投稿を参考に試しているのですが、うまく横幅を縮小することができません。

https://developer.cybozu.io/hc/ja/community/posts/360029688031-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8-%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E6%A8%AA%E5%B9%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 

上記だと対応できないのでしょうか。

getTableElementsByCodeを使用して、同様に試しているのですが、うまくいかず。。。

横幅の制御と値の設定も含め、サンプルコード頂けると助かります。

ご教示のほど、よろしくお願いいたします。

2

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

トヨクモの友利と申します。

テーブルフィールドのカスタマイズで横幅を設定した後、以下のCSSを読み込ませることで設定した横幅が日付フィールド等にも反映されるようになります。

div[data-vv-name="subtable"] div[data-vv-name$="-date"] { //subtableはテーブルのフィールドコード、
                        //-dateのdateはテーブル内の日付フィールドのフィールドコード
width: 100%;
}

 

3

トヨクモ 友利様

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

試してみたのですが、うまく反映されす。何か記載間違いがあるのでしょうか。

＜jsの記載＞ ※state.fields[1].fields[0]・・・対応テーブル＞対応日

fb.events.form.mounted = [function (state) {
     state.fields[1].fields[0].style.width = ‘110px’;
     state.fields[1].fields[0].style.tableLayout = ‘fixed’;
     return state;
}];

<cssの記載>

div[data-vv-name=“対応テーブル”] div[data-vv-name$=“-対応日”] { 
     width: 100%;
}

ご確認をお願いいたします。

4

テーブル内のフィールドの横幅はJavaScriptカスタマイズではなく、フィールドの設定から行うことで動作するかと思います。

5

テーブルのフィールド幅を、以下で設定し、cssは上記の内容としておりますが

表示結果は以下となっております。フィールドの設定に誤りがあるのでしょうか。

※フィールド名、フィールドコードは同じ名前を使用しております。

お手数ですが、ご確認をよろしくお願いいたします。

6

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