mtnk
1
お世話になっております。
・実現したいこと
トヨクモのフォームブリッジにて長文のラベルを小窓にまとめて、その中でスクロールして確認出来るものを考えております。
・実施したこと
下記URLにて似た質問が投稿されており、同様のcssファイルを作成し実装してみました。
たしかに実現は出来たのですが、この手法ですと同じフォーム内すべてのラベルフィールドに適用されてしまい、すべてのラベル右側にスクロールバーが表示されてしまいます。
・作成したCSSコード
.ql-editor {
max-height: 200px;
overflow-y: scroll;
display: block;
}
特定のラベルのみ小窓内でスクロール確認出来るようなカスタマイズ方法がございましたら、ご教授頂きたいです。
よろしくお願いいたします。
aaa
2
複数のラベルフィールドがあるのでCSSの指定では、すべてのラベルフィールドに適用されてしまうという課題と理解しました。
CSSでやるなら、このあたりを参照するのだろうと思います。
:nth-of-type() - CSS: カスケーディングスタイルシート | MDN
JavaScriptで設定したほうが楽かなと思いました。
(function () {
"use strict";
fb.events.form.mounted = [function (state) {
// フィールドコードが label のフィールドの要素を取得します
const labelField = fb.getElementByCode('label');
// 指定されたクラスやIDなどを持つ要素をすべて取得
const elements = labelField.querySelectorAll('.ql-editor');
// 取得した要素の中からlabel要素のみをフィルタリングし、スタイルを適用
elements.forEach(element => {
if (element.tagName === 'LABEL') {
element.style.maxHeight = '200px';
element.style.overflowY = 'scroll';
element.style.display = 'block';
}
});
return state;
}];
})();
上側のラベルには フィールドコードが labelで、下側は label1に設定してあります。
「いいね!」 1
system
(system)
クローズされました:
3
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。