複数フィールド種のサイズ合わせに関して（ご質問）

[Legacy_Account2742 (44key（Legacy Account）)]

下記のように、左から、文字列（１行）、文字列（複数行）、ラジオボタンを１明細として１行に画面表記したいと思います。
→縦幅の一番大きい文字列（複数行）に他のフィールドの縦幅を合わせたい。

普通に定義しようとすると、上揃えとなり、しっくりきません。

また、左の文字列（１行）を文字列（複数行）に変えてみたところ、文字列（複数行）フィールドの横幅の調整が効かず、横に間延びしてしまいます。

左の文字列（１行）と右のラジオボタンを縦幅の一番大きい中央の文字列（複数行）に縦幅を合わせ、かつ、各々の設定値（“No.1"と"YES/NO”）を上下中央揃えにする方法があればご教示願います。

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

こちらもまたDOM操作になりますが、以下のようにすれば可能です。

fieldElementには、文字列（複数行）フィールドに割り振られている番号（Chromeであればフィールドの上で右クリック→検証を選択すると「value-xxxxxxx」と記載されています）を指定して下さい。

(() => {
    'use strict';
    
  let fieldElement = 'value-xxxxxxx';
    
    kintone.events.on([
        'app.record.create.show', 'app.record.edit.show'
    ], (event) => {
        let textarea = document.getElementsByClassName(fieldElement)[0];
        let height = textarea.firstChild.firstChild.clientHeight;
        let row = textarea.parentNode.parentNode;
    
        [...row.children].forEach((field) => {
            let el = field.getElementsByClassName('control-value-gaia')[0];

          el.style.display = 'table-cell';
          el.style.verticalAlign = 'middle';
          el.style.height = `${height}px`;
        });
    
        return event;
    });
})();

[Legacy_Account2742 (44key（Legacy Account）)]

ご提示頂きましたサンプルで試してみまいた。

下記の通り、中央揃えはできましたが、左のテキストボックス（1行）と右のラジオボタンを、中央のテキストボックス（複数行）の縦幅（95px）に揃えることができません。

下記のコード内容となっていますが、当方の不慣れで、コードの解釈ができず、齟齬があるものと考えます。
恐れ入りますが、アドバイスいただけないでしょうか？

(() => {
  'use strict';
  
  let fieldElement_1 = ['value-5540537'];

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

    let textarea = document.getElementsByClassName(fieldElement_1)[0];
      let height = textarea.firstChild.firstChild.clientHeight;
      let row = textarea.parentNode.parentNode;
  
      [...row.children].forEach((field) => {
          let el = field.getElementsByClassName('control-value-gaia')[0];

          el.style.display = 'table-cell';
          el.style.verticalAlign = 'middle';
          el.style.height = `${height}px`;
      });
  
      return event;
  });
})();

 

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

44key さま

縦幅揃えですね。失念しておりました。

更に子要素へアクセスすればinput要素を直接編集することができますが、フィールドの形式ごとに対応が必要です。日付フィールド等も同じようにする場合、更にアクセスする要素を変更する必要があります。

同じ行にラベルやスペースがあった場合にエラーになるため、その対策も加えています。

(() => {
    'use strict';
    
    let fieldElement = 'value-5540537';
    
    kintone.events.on([
        'app.record.create.show', 'app.record.edit.show'
    ], (event) => {
        let textarea = document.getElementsByClassName(fieldElement)[0];
        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`;
                }
            });
        });
    
        return event;
    });
})();

[Legacy_Account2742 (44key（Legacy Account）)]

mls-hashimoto様
お陰様で、下記の通り、左のテキスト（１行）と右のラジオボタンの縦幅が、中央のテキスト（複数行）の縦幅に合わせて表示有れるようになりました。有難うございました。

構文の理解が追い付いておりません。Chromeの開発ツールで確認すると、3つのフィールドのCLASSは以下のようになっておりました。
左のテキスト（１行）・・・input-text-outer-cybozu
中央のテキスト（複数行）・・・input-text-outer-cybozu
右のラジオボタン・・・input-radio-cybozu
これと、お示し頂いたコードの判定文との関係は以下の通りでしょうか？（ラジオボタンのclassはuserselect-cybozu？）
if (el.className === ‘input-text-outer-cybozu’){・・・ →左のテキスト（1行）と中央のテキスト（複数行）を判定？
}else if (el.className === ‘userselect-cybozu’){・・・    →ラジオボタンを判定？
}else{・・・
}

また、if文のheightの指定について、ご教示願います。
・el.firstChild.style.height = ** ${height + 6}px ** およびel.parentNode.style.height = ** ${height}px ** については、囲み文字が、 ’ ’ ではなく、 となっていますが、どういう使い訳なのでしょうか？
を ’ ’ に書き換えると、縦幅の変更が効かなくなりました。
・また、if文の最初の判定が${height **+ 6** }pxとなっていますが、この 6 の使い方（考え方）をご教示願います。
勉強不足で申し訳ありません、ご教示頂けると助かります。

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

44key さま

無事に実装できたようで何よりです。

構文についてですが、大まかに「文字列（複数行）フィールドを取得してその高さを変数に代入」「取得した文字列（複数行）フィールドの親要素（フィールドがある行）にアクセス」「親要素（行）の子要素（同じ行内のフィールド）にアクセスし、高さを文字列（複数行）フィールドと同じにする」という流れになっています。

「input-text-outer-cybozu」はご認識通り文字列フィールドの判定にしています。「userselect-cybozu」はユーザー選択フィールドの判定にしています（今回の実装とは関係ありませんが、テスト環境で使用したところユーザー選択フィールドの装飾が特にずれたため、今後実装される場合や、このスレッドを参考に使用される方がいた場合に備えて実装しただけです）。

‘’（クォーテーション）と``（バッククォーテーション）についてですが、単純にJavaScriptの新しい書き方でテンプレートリテラルというものです。テンプレートリテラル内で${}で囲んだものは変数として扱うことができるので、

let str = 'c';
'ab' + str + 'de' // => 'abcde'

を

let str = 'c';
`ab${str}de` // => 'abcde'

のように書き換えることができます。今回の場合だと

(height + 6) + 'px';

と同じ意味になります。私の場合、文字列内に変数を含むかどうか、一目で判別できるようにするため使い分けています。

6については、装飾を見ながら調整した数字です（clientHeight：文字列複数行フィールドの高さより6ピクセル足した方が他のフィールドと揃って見栄えが良いと思っただけです。逆に他のフィールドを6ピクセル引くでも問題はないと思います）。

[Legacy_Account2742 (44key（Legacy Account）)]

mls-hashimoto様
ご説明ありがとうございした。全てが勉強になります。
ひとつだけ、ラジオボタが、if文のどこで判定されているか理解できていません。

また、最終的には複数行分、同様に縦幅サイズを揃えたいと思っております。

ところが、下記コードを試しているのですが、下記の通りうまくいきません。→1行目含め、すべての行で縦幅合わせができない。

for文を追加したコードは以下の通りとなります。

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

    let fieldElement = ['value-5540537', 'value-5540538','value-5540543'];
        console.log('fieldElement.length = ' + fieldElement.length);      

    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`;
                }
            });
        });
    
        return;                                                             // for判定を追加
    }                                                                       // for判定を追加
        return event;
    });
})();

JSEdit for kintoneを見ると、下記の通り、構文エラーが表示されていました。

大変申し訳ありませんが、原因と解決方法についてご指南いただけないでしょうか？

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

44key さま

ラジオボタンはif文のelse（どの条件にも当てはまらない場合）に相当しています。

プログラムが動かないのはfor文に誤りがあるようです。条件文が「i(0) > 配列の長さ」となっているので、一度も実行しないループになっています。

  for(let i = 0; i > fieldElement.length; i++) {

↓

  for(let i = 0; i < fieldElement.length; i++) {

 

JSEdit for kintoneの件ですが、気にする必要はありません。エラーではなく警告文にあたりますね。ループ（forループ）内で関数作成（forEach）をしないようにという旨の警告ですが、おそらく昔のJavaScriptの仕様（varで宣言したループでループ内変数を使用した関数を作成した場合、最終ループしか参照しなくなる）に対してのものではないかと思います。letで宣言されているのと、JSEdit for kintoneの構文チェックはやや古いので、気にしないで問題ありません。

個人的には慣れてきたらテキストエディタの使用をおすすめします。

[Legacy_Account2742 (44key（Legacy Account）)]

mls-hashimoto様
ラジオボタン判定の件、承知いたしました。
また、for文に関するご指摘有難うございました。
早速、「for(let i = 0; i < fieldElement.length; i++) {」に修正して実行してみたのですが、1行目はOKでしたが、2行目と3行目は縦幅が変わりません。
他に齟齬がないかご指摘いただけると幸いです。

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

44key さま

        return;                                                             // for判定を追加
    }                                                                       // for判定を追加
        return event;
    });

for文内のreturnは必要ありません。

[Legacy_Account2742 (44key（Legacy Account）)]

mls-hashimoto様
ご指摘有難うございました。
お陰様で期待通りの結果となりました。
本件に関するこれまでのアドバイスに対し御礼申し上げます。