文字列（複数行）の縦幅に他のフィールド縦幅を合わせる方法（ご質問）

kintone カスタマイズ
1

先の投稿で、下図の通り、左側文字列（１行）と右側ラジオボタンの縦幅を、編集画面表示時に中央の文字列（複数行）の縦幅に合わせる方法をご教示いただきました。

実現したコードは下記の通り。

(() => {
    'use strict';
    
    let fieldElement = ['value-5540537', 'value-5540538','value-5540543'];

    kintone.events.on([
        'app.record.create.show', 'app.record.edit.show'
    ], (event) => {

    for(let i = 0; i < fieldElement.length; i++) {                          // for判定を追加
        
        let textarea = document.getElementsByClassName(fieldElement[i])[0]; // for判定を追加
        let height = textarea.firstChild.firstChild.clientHeight;
        let row = textarea.parentNode.parentNode;
    
        [...row.children].forEach((field) => {
            if (!field.getElementsByClassName('control-value-gaia').length) return;

            [...field.getElementsByClassName('control-value-gaia')[0].children].forEach((el) => {

                if (el.className === 'input-text-outer-cybozu') {
                    el.firstChild.style.display = 'table-cell';
                    el.firstChild.style.verticalAlign = 'middle';
                    el.firstChild.style.height = `${height + 6}px`;
                } else if (el.className === 'userselect-cybozu') {
                    el.parentNode.style.display = 'table-cell';
                    el.parentNode.style.verticalAlign = 'middle';
                    el.parentNode.style.height = `${height}px`;
                } else {
                    el.style.display = 'table-cell';
                    el.style.verticalAlign = 'middle';
                    el.style.height = `${height}px`;
                }
            });
        });
    
    }                                                                       // for判定を追加
        return event;
    });
})();

次に、レコード詳細画面についても同条件にできないかと考えています。
つまり、現在は、左図の表示内容となっていますが、これを、右図の通り、左側文字列（１行）と右側ラジオボタンの縦幅を、編集画面表示時に中央の文字列（複数行）の縦幅に合わせたいと思っています。

これを実現するコード内容に関しご助言頂けると助かります。

2

以下で可能です。イベント（detail.show）を追加し、height宣言時に取得する要素をイベントに応じて変更しています。

(() => {
    'use strict';
    
    let fieldElement = ['value-5540537', 'value-5540538','value-5540543'];

    kintone.events.on([
        'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
    ], (event) => {
        for (let i = 0; i < fieldElement.length; i++) {
            let textarea = document.getElementsByClassName(fieldElement[i])[0];
            let height = event.type.match(/detail/) ? textarea.firstChild.clientHeight : textarea.firstChild.firstChild.clientHeight;
            let row = textarea.parentNode.parentNode;
        
            [...row.children].forEach((field) => {
                if (!field.getElementsByClassName('control-value-gaia').length) return;

                [...field.getElementsByClassName('control-value-gaia')[0].children].forEach((el) => {
                    if (el.className === 'input-text-outer-cybozu') {
                        el.firstChild.style.display = 'table-cell';
                        el.firstChild.style.verticalAlign = 'middle';
                        el.firstChild.style.height = `${height + 6}px`;
                    } else if (el.className === 'userselect-cybozu') {
                        el.parentNode.style.display = 'table-cell';
                        el.parentNode.style.verticalAlign = 'middle';
                        el.parentNode.style.height = `${height}px`;
                    } else {
                        el.style.display = 'table-cell';
                        el.style.verticalAlign = 'middle';
                        el.style.height = `${height}px`;
                    }
                });
            });
        }

        return event;
    });
})();
3

mls-hashimoto様
ご教示有難うございました。
縦幅を揃えることができました。
一方で、下図のように文字の折り返しがされなくなりました。
これを、折り返して、かつ、全文字が表示されるようにするためのコード内容をご教示いただけないでしょうか。

 

 

4

44 key さま

table-cellにした影響ですね…wordBreakで設定できます。

            });

          if (event.type.match('detail')) textarea.firstChild.style.wordBreak = 'break-word'; // 単語単位に関係なく改行する場合はbreak-all
      }

        return event;
5

mls-hashimoto様

ご教示有難うございました。
下図の通り、幅合わせと折り返しができるようになりました。

6

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