[WP]WP WP Formでcheckboxやradioの折り返しを防ぐ方法
2018年6月5日
フォーム作成時に、チェックボックスやラジオボタンの部品の下に文言が回り込んでしまったり、文言の途中で折り返されてしまうと困りますよね。
↑↑ こんな感じで。（「船橋」が船で折り返されてしまっている）
変なところで折り返されないように、改行適当な長さで改行を入れて対応するというのも一つの手ですが。（笑）
例えば、レシポンシブデザインの場合はどこで折り返されるのかわからないので、改行などでごまかすことができません。
というわけで、折り返されないようにする対応のアイデアを紹介します。
ブロック要素にする
↑↑ これを一つの塊と認識させるため、インライン要素になっている場合はブロック要素になるようCSSに指定を入れる。
HTML----------------------------------------------------------- */
<label><input type="radio" name="場所" value="船橋" />船橋</label>
CSS------------------------------------------------------------ */
label {
display: block;
}
折り返し禁止の指定を入れる
文字を折り返しさせないだけであれば、CSSに折り返し禁止の指定を入れるだけでもいけるはず。
HTML----------------------------------------------------------- */
<label><input type="radio" name="場所" value="船橋" />船橋</label>
CSS------------------------------------------------------------ */
label {
white-space: nowrap;
}
WordPressのMW WP Formに適応させる場合
MW WP Formを使用する場合、あらかじめ登録されているタグなどが入ってしまうので、それを利用して折り返しや回り込み禁止の指定をする。
例えば、MW WP Formで下記のように設定した場合、
[mwform_radio name="場所" children="船橋" separator=","]
HTML上では、下記のように表示される。
<span class="mwform-radio-field horizontal-item"><label><input type="radio" name="場所" value="船橋" /><span class="mwform-radio-field-text">船橋</span></label></span>
なので、ここでclass指定されている「mwform-radio-field」を利用して、CSSにブロック要素化と折り返し禁止の指定を入れる。
またこの状態だとチェックボックスやラジオボタンが縦並びで表示されてしまうので、横並びで表示させるためにFloatも指定する。
.mwform-radio-field {
display: block;
white-space: nowrap;
float: left;
}
WEBブラウザやスマホで確認。
↑↑ 途中改行されなくなりました。
