【フォームブリッジ】サブテーブルの添付ファイル幅の固定

kintone カスタマイズ
1

テーブル内の添付ファイルのフィールド幅を固定したいです。

現在DOM操作で実現をしております。

アップデートにより対応できるコードや簡素なコードをご存じでしたらご指導いただきたいです。よろしくお願いいたします。

const className = 'el-upload-list__item-name';
    fb.events.fields.テーブル.fields.添付ファイル.changed = [function (state) {
        const field = document.getElementsByClassName(className);
        //console.log(field); 
        //console.log(field[0].innerText.length); 
        var str = '';
        for (let i = 0; i < field[0].innerText.length / 10; i++) {
            str += field[0].innerText.substr(i * 10, 10);
            str += '<br>';
        }
        //console.log(str);
        field[0].innerText = str;
        field[0].innerHTML = str;
        return state;
    }];
2

Kさん

こんにちは。

 

アップデートにより対応＝トヨクモ様のメンテナンスによりclass名が変わるなどの場合の対応

という認識で合っていますか？

 

例えば、class名指定ではなく、5番目のtd要素の横幅を変えるといったcssはいかがでしょうか。

こちらですと、Kさんがテーブルの列項目を入れ替えない限り、固定できると思います。

そもそもの認識が誤っていたらすみません。

/* 5番目のtd要素の横幅を固定 */
td:nth-child(5) {
min-width: 300px;
max-width: 300px;
}
3

koichiさん、お世話になっております。

ご指導ありがとうございます。

おっしゃる通り、「class名が変わるなどの場合の対応」がないカスタマイズ方法を探しております。

ご提示いただいたcssでやりたいことを実現できました。

文書名が長い場合に「・・・」となってしまうのですが、文書名を折返して表示することはできますでしょうか。

折返しは10文字ごとが業務に適しております。

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

4

Kさん

 

先のcssに以下を追加してください。

添付ファイル名が折り返しで表示されます。

 

デフォルトでは、white-space: nowrap;となっており、自動折り返しされません。

そのため、この部分を強制的に「normal」に上書きし、折り返しするようにしました。

/* 添付ファイル名を全て表示 */
td:nth-child(5) a {
 white-space: normal !important;
}
5

koichiさん

ご指導ありがとうございます。

こんなに簡単に実現できるのですね。

早速こちらで使用したいと思います。