スマートフォンにてラベルの前後に改行が入ってしまう仕様？について

kintone 開発相談
1

平素よりお世話になっております。

スマートフォン用に JS にて、フィールドの各幅を調整して一列に並べることができました。

https://developer.cybozu.io/hc/ja/community/posts/360001685546–%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E8%A1%A8%E7%A4%BA%E6%99%82%E3%81%AEinput%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E5%B9%85%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

 

その後、その並べたフィールドの間に ラベルを挟もうとしたところ、ラベルの前後で改行は入ってしまう様です。

以下の方法を試してみましたが、改善することはありませんでした。

https://developer.cybozu.io/hc/ja/community/posts/360037450592-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA

 

本件、お力添えをいただけると助かります。

どうぞよろしくお願い致します。

2

お世話になっております．

トヨクモの石川と申します．

 

ラベルというフィールドの構造が他のフィールドとは異なり，フィールドコードを利用した操作ができない仕様となっております．

ご提示頂いたリンク先のプログラムに対して以下のような処理を加えることで，幅等を変更することが可能です．

(function() {
"use strict";
fb.events.form.mounted = [function (state){
if(window.parent.screen.width < 767){
var halfFields = ["数値1", "数値2"]; //幅を操作したいフィールドのフィールドコード（ラベルを除く）
halfFields.forEach(function(halfField){
document.querySelector('[data-vv-name="' + halfField + '"]').parentNode.style.setProperty('width', '30%', 'important');
});

var targetLabel = [1, 3, 5]; // Styleを操作したいLabelの集合（数値は上から何番目を数えたもの）
var labelFields = document.getElementsByClassName('ql-editor');
for (const i of targetLabel) {
labelFields[i-1].parentNode.style.setProperty('width', '30%', 'important');
}
}
}];
})();
3

石川様

ご丁寧にありがとうございます。ご提示の方法を試してみます。