ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

ラジオボタンの選択肢の文字列が長い場合の対処

ラジオボタンの選択肢が、当初は半角英字で15文字程度でした。
15文字程度なので1行で収まります。

1度お客さんに見せるとラジオボタンの選択肢が変わって少し長くなりました。
表示の幅を調整して、1行で収まるようにしましたた。

調整後を再度見せると、またラジオボタンの選択肢が長くなって30文字程度となりました。
30文字程度あると、表示の幅を際限なく広げるわけにもいかず、ラジオボタンの選択肢は1行ではなく2行にしなくてはなりません。

f:id:AJYA:20181005061027p:plain
unsplash-logoHitesh Choudhary

改行させるためにタグをいれる

フォントに影響されず、ラジオボタンの選択肢の改行の位置を固定したい内容だったので、改行したい位置に
タグを追加しました。
改行はされますが、ラジオボタンの下に選択肢が回り込みます。
本番運用開始直前で時間がなかったので、仕方なく、改行の後に、半角または全角スペースを入れるのがいいか、divタグを入れて幅指定をするのがいいかを試しました。

試した結果、改行の後にdivタグを入れて対処しました。


後日調べると、ラジオボタンの選択肢をpタグで囲むという方法で、ラジオボタンの下に選択肢が回り込まないようにできるようです。
思ったとおりにできるか確認して、できたら改めて記事にしたいと考えています。