いつもお世話になっております。
タブレットでフォームブリッジのラジオボタンを表示させた際に、縦型横型に関わらずすべて縦に並んでしまいます。
こちらをパソコン表示と同じように横並びにしたいのですが、どのように指定すればよいでしょうか。
ちなみに横並びにしたい理由はなるべくタブレットでのスクロールを減らし、画面内に多くの情報を表示させたい為です。
よろしくお願いいたします。
Y.SUGI様
お世話になっております。
トヨクモの江田と申します。
CSSカスタマイズで実装できます。
下記のようなコードで実装できるかと思います。
@media (min-width: 768px) { /* 横幅768px以上には下記スタイルを適用 */
.ui.vertical.buttons {
flex-direction: row;
flex-wrap: wrap;
}
.ui.vertical.buttons>.el-button.mobile-button{
width: initial;
border: none;
border-radius: 0;
padding: 5px;
}
}
江田篤史様
お世話になっております。
頂いたコードで無事横並びで表示されました。
ありがとうございます！
江田篤史様
昨日頂いたコードでラジオボタンは希望通り横並びになったのですが、
縦並びのままで良かったドロップダウンまで横並びになってしまいました。
クラス名が一緒のようなのでラジオボタンのみ横並び、というのは難しいのでしょうか。
Y.SUGI様
※2021/4/23追記 こちらは非推奨な手法になるため参考にしないでください。個別の要素を指定する場合は、JavaScriptカスタマイズをご利用ください。申し訳ございません。https://form.kintoneapp.com/help/customize
お世話になっております。
フィールドごとに振られるdata-****属性があるので、そちらで指定可能です。
@media (min-width: 768px) { /* 横幅768px以上には下記スタイルを適用 */
.ui.vertical.buttons[data-v-ff70a240] {
flex-direction: row;
flex-wrap: wrap;
}
.ui.vertical.buttons[data-v-ff70a240]>.el-button.mobile-button{
width: initial;
border: none;
border-radius: 0;
padding: 5px;
}
}
よろしくお願いいたします。
江田篤史様
早々にご回答頂きありがとうございます。
無事ラジオボタンのみ横並びにする事が出来ました。
ありがとうございます！
Y.SUGI様
お世話になっております。
上記のdata-****属性で指定する方法は非推奨でした。
今後、個別の要素を指定する場合はJavaScriptカスタマイズをご利用ください。
https://form.kintoneapp.com/help/customize
申し訳ございませんがよろしくお願いいたします。
江田篤史様
お世話になっております。
非推奨でしたか、昨日ラジオボタンの横並びが出来なくなっていて、ソースをみたらdata-***の値が変わっていておかしいな、と思ったところでした。
恐れ入りますが、JavaScriptではどのように記述すればよいのでしょうか。
Y.SUGI様
お世話になっております．
JavaScriptカスタマイズのフィールド要素取得APIを用いて，特定のフィールドにclass属性を追加し，CSSセレクタに利用すると良いです．
・JavaScript
(function () {
'use strict';
fb.events.form.mounted.push(function (state) {
var fieldCode = 'radio_button'; //フィールドコードを指定
fb.getElementByCode(fieldCode).classList.add('radio-button');
return state;
});
})();
・CSS
@media (min-width: 768px) { /* 横幅768px以上には下記スタイルを適用 */
.radio-button .ui.vertical.buttons {
flex-direction: row;
flex-wrap: wrap;
}
.radio-button .ui.vertical.buttons>.el-button.mobile-button{
width: initial;
border: none;
border-radius: 0;
padding: 5px;
}
}
今回の手法についても，「.ui.vertical.buttons」などのセレクタを用いており，ドキュメントの構造に大きく依存したカスタマイズになっております．
これらのドキュメントの構造に依存したカスタマイズについては，フォームブリッジの仕様変更により動作しなくなる可能性があることをご了承お願いいたします．
特に，以前のコメントのdata-****属性に関してはアップデートごとに毎回変化する値なので使用は避けてください．
こちらをお勧めしてしまったのは私の不手際です．申し訳ございません．
今後ともよろしくお願いいたします．
江田篤史様
お世話になっております。
コードのご提示ありがとうございます。
ラジオボタンが複数ある場合は下記のような記述で問題ないでしょうか。
(function () {
'use strict';
fb.events.form.mounted.push(function (state) {
var fieldCode = 'フィールドコード1'; //フィールドコードを指定
fb.getElementByCode(fieldCode).classList.add('radio-button');
var fieldCode = 'フィールドコード2';
fb.getElementByCode(fieldCode).classList.add('radio-button');
return state;
});
})();
一応こちらの環境で試してみたところ上記記述でどちらのラジオボタンも横並び表示になっています。
data-****記述につきまして、承知いたしました。
とんでもございません、色々な指定方法があるんだなぁと勉強になりました。
こちらこそ今後ともよろしくお願いいたします。
Y.SUGI様
お世話になっております．
はい、正しいです。
もしフィールドが増えてきて同じ処理を何度も書くのが面倒となれば、フィールドコードを配列にまとめて、繰り返し処理させるのもよいかと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
var fieldCodes = [ //フィールドコードを指定
'フィールドコード1',
'フィールドコード2',
];
fieldCodes.forEach(function(fieldCode) {
fb.getElementByCode(fieldCode).classList.add('radio-button');
});
江田篤史様
お世話になっております。
何度も本当にありがとうございます。
おかげさまで無事思い通りの表示設定にする事が出来ました。
増えた時にはforeachを使ってみようと思います。
ありがとうございました、今後ともよろしくお願いいたします。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。