新規投稿
フォローする

チェックボックスのフィールドを複数行で表示

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

下記の記事を参考にチェックボックスを折り返すよう試みているものです。

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

複数行で表示させるところまではできているのですが、

なぜかフィールドの外枠がフィールド名とフィールド項目のわずかな隙間に押しつぶされた形で表示されています。

CSSは下記のようにしています。

.control-gaia.field-XXXXXXX {
width: 1000px !IMPORTANT;
}

.control-value-gaia.value-XXXXXXX span {
float: left;
}

何が間違っているのかご教授いただきたいです。よろしくお願いします。

0

2件のコメント

Avatar
江田篤史

よこい様

お世話になっております。
トヨクモの江田と申します。

恐らく、floatの解除忘れが原因かと思います。
http://sutara79.hatenablog.com/entry/2016/09/26/130238

親要素に疑似要素を追加して、「clear: both;」を指定するのが簡単だと思います。

.input-radio-cybozu:after{
content: '';
display: block;
clear: both;
}
0
Avatar
よこい

江田様

 

コメントが遅くなりました。

記載頂いた5行をCSSに追加することでやりたいことが出来ました!

ありがとうございます。

0
ログインしてコメントを残してください。