本件、追加で確認したい内容があり、投稿致します。
前回までに下記コードにて、入力/編集画面および詳細画面に於いて、左側文字列（１行）と右側ラジオボタンを中央の文字列（複数行）の縦幅に合わせて表示することができようようになりました。→https://developer.cybozu.io/hc/ja/community/posts/13249834826137-%E6%96%87%E5%AD%97%E5%88%97-%E8%A4%87%E6%95%B0%E8%A1%8C-%E3%81%AE%E7%B8%A6%E5%B9%85%E3%81%AB%E4%BB%96%E3%81%AE%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E7%B8%A6%E5%B9%85%E3%82%92%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95-%E3%81%94%E8%B3%AA%E5%95%8F-
(() => {
'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`;
}
});
});
if (event.type.match('detail')) textarea.firstChild.style.wordBreak = 'break-word';
}
return event;
});
})();
その後の検証作業の過程で、下記の通り、入力/編集画面で文字列（複数行）に改行を入れた文章を入れました。→No2とNo.3の行
そうすると、保存後の詳細画面で下記の表示内容となりました。→No2とNo.3の行で改行数分の段表示となってしまう。
詳細画面に於いても、入力編集画面と同じ表示内容にすることはできないでしょうか？
detail.showイベントだとDOM構造が変わり、childrenで各行にtable-cellを適用しているようです。
恐らく以下の形で可能です。
(() => {
'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) => {
let isDetail = event.type.match(/detail/);
for (let i = 0; i < fieldElement.length; i++) {
let textarea = document.getElementsByClassName(fieldElement[i])[0];
let height = isDetail ? textarea.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.parentNode.parentNode.className.match('control-multiple_line_text-field-gaia')) return;
if (el.className === 'input-text-outer-cybozu') {
el.firstChild.style.display = 'table-cell';
el.firstChild.style.verticalAlign = 'middle';
el.firstChild.style.height = `${height}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 if (el.className === 'input-file-cybozu') {
el.style.display = 'table-cell';
el.style.verticalAlign = 'middle';
el.style.height = `${height - 29}px`;
} else {
el.style.display = 'table-cell';
el.style.verticalAlign = 'middle';
el.style.height = `${isDetail ? (height - 8): (height - 6)}px`;
}
});
});
if (isDetail) textarea.firstChild.style.wordBreak = 'break-word';
}
return event;
});
})();
mls-hashimoto様
この度もご教示頂きありがとうございました。
お陰様で下記の通り期待通りの表示となりました。
この辺りのコードの書き方で参考になるサイト等ございましたら、ご教示頂けると助かります。
mls-hashimoto様
印刷画面にも適用したいと思い、イベントに’app.record.print.show’を加えただけでは反映されませんでした。
何度も申し訳ありませんが、印刷画面での表示も同様に縦幅を合わせるためのコーディングをご教示いただかませんか。
44key さま
print.showで指定する要素はdetail.showと同じのようです。
(() => {
'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', 'app.record.print.show'
], (event) => {
let isDetail = event.type.match(/detail/);
let isPrint = event.type.match(/print/);
for (let i = 0; i < fieldElement.length; i++) {
let textarea = document.getElementsByClassName(fieldElement[i])[0];
let height = (isDetail || isPrint) ? textarea.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.parentNode.parentNode.className.match('control-multiple_line_text-field-gaia')) return;
if (el.className === 'input-text-outer-cybozu') {
el.firstChild.style.display = 'table-cell';
el.firstChild.style.verticalAlign = 'middle';
el.firstChild.style.height = `${height}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 if (el.className === 'input-file-cybozu') {
el.style.display = 'table-cell';
el.style.verticalAlign = 'middle';
el.style.height = `${height - 29}px`;
} else {
el.style.display = 'table-cell';
el.style.verticalAlign = 'middle';
el.style.height = `${(isDetail || isPrint) ? (height - 8): (height - 6)}px`;
}
});
});
};
return event;
});
})();
参考になるサイトですね。私自身が少し前までプログラミングの経験はなく、このコミュニティで過去のスレッドを見ながら理論を学んだので、お力になれるか分かりかねます。最近だとオンライン学習サイト等が一般的なのではないかと思います（それでも学べるのは一般的なJavaScriptで、kintoneに特化したJavaScriptではないように思います）。
またはこのコミュニティのチュートリアルから始められるのが良いかもしれません。
mls-hashimoto様
有難うございました。
お陰様で下図の通り、印刷画面に於いても幅揃えできました。
「私自身が少し前までプログラミングの経験はなく」とは全く驚きです。
チュートリアルを始めて見ます。
system
(system)
クローズされました:
7
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。