ラジオボタン、チェックボックスの段落分けについて

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

 

掲題の件、ラジオボタンやチェックボックスの項目が30個など多くなりすぎると画面をスクロールして選択するのが手間になってしまいます。

 

横でならべた場合は5項目ごとに改行、

縦にならべた場合は5項目ごとに次の列といったカスタマイズは可能でしょうか?

 

お手数ですがよろしくお願いいたします。

y-kishi さん、こんにちは

こちらの記事のrex0220さんのアドバイスが参考になるかもしれません。

https://developer.cybozu.io/hc/ja/community/posts/115017926403/comments/115004178743

Shotaro Matsuda様

 

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

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

 

すでに質問されていた内容で失礼いたしました。

ご案内いただいた記事を参照し、指定の幅で改行させることができました。

 

ありがとうございます。

y-kishiさん、

無事設定できたようで、よかったです。

これ、標準機能でなんとかして欲しいですよね。

以下のようなcssになりました。

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

/* ラジオボタンの項目のカラムを2に、枠線を設定する */

.control-gaia.control-single_check-field-gaia.field-5127715 {
column-count: 2;
width: auto !important;
height: auto !important;
border: 1px solid #dedede !important;
margin: 20px 0px 0px 0px !important;
padding: 20px 0px 20px 0px !important;
}

 

/* ラジオボタンのフィールド名を枠線より上に表示する */

.control-label-gaia.label-5127715 {
column-span: all;
margin: -50px 0px 10px 0px !important;
}

 

/* ラジオボタンの枠線を消す */

.control-gaia .input-radio-cybozu {
border-width: 0px;
padding: 0px 0 0 0px;
}

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

今回適用したアプリではラジオボタンを1つしか使用していなかったので、

無理やりな感じが否めませんが、ひとまずは上記のように設定しました。

 

これから少しづつカスタマイズして見栄えや汎用性を向上していきたいと思います。

 

たしかに、標準機能で搭載されて欲しいです。

y-kishiさん、

共有いただき、ありがとうございます!