【フォームブリッジ】スマートフォン表示時のinputフォームの幅設定について

kintone カスタマイズ
1

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

 

掲題の件、スマートフォンでフォームブリッジを表示する際、フォームがすべてwidth100%で表示されます。

 

スマートフォン表示時に、指定のフォームのみwidth50%などで表示するようにカスタマイズすることは可能でしょうか？

 

ブラウザのコンソールで確認したところ、以下のcssの設定を変更すれば可能そうですが、フォームに付与したidとの組み合わせ方が分りませんでした。

========================================================

@media only screen and (max-width: 767px)
.ui.grid>.stackable.stackable.row>.column, .ui.stackable.grid>.column.grid>.column, .ui.stackable.grid>.column.row>.column, .ui.stackable.grid>.column:not(.row), .ui.stackable.grid>.row>.column, .ui.stackable.grid>.row>.wide.column, .ui.stackable.grid>.wide.column {
width: 100%!important;
margin: 0!important;
box-shadow: none!important;
padding: 1rem!important;
}

========================================================

 

初歩的な質問で申し訳ありませんが、

アドバイスなどいただければ幸いです。

2

y-kishi様

お世話になっております。 cstapの江田です。

JavaScriptで実装した方が、フィールドコード等で指定しやすいかと思います。

(function(){"use strict";fb.events.form.mounted=[function(state){if(window.parent.screen.width\<767){varhalfFields=["数値1","数値2"];//幅を半分にするフィールドのフィールドコードhalfFields.forEach(function(halfField){document.querySelector('[data-vv-name="'+halfField+'"]').style.width='50%';});}}];})();
3

江田篤史 様

 

ご回答ありがとうございます。

教えていただいたコードで無事に指定のフォームの幅を50%に設定できました。

 

厚かましくも、もう一点ご教示願いたいのですが、

フォームを2つ続けて50%にした際にパソコン表示のように1列に並べて表示することは可能でしょうか？

 

お手数お掛けしますが、よろしくお願いいたします。

4

y-kishi様

お世話になっております。 cstapの江田です。

上記コードでstyle変更していた要素の代わりに、その親要素に「width: 50% !important;」を設定するとよいと思います。

document.querySelector('[data-vv-name="' + halfField + '"]').parentNode.style.setProperty('width', '50%', 'important');
5

江田篤史 様

 

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

回答いただきありがとうございます。

 

 

ご教示いただいたコードを適用したところ、希望通りの表示になりました。

ありがとうございます。

大変勉強になりました。