デザインフォームでスマートフォンのテキスト項目が飛び出てしまう

  • 更新

これは、テキスト項目の「表示サイズ」をPC向けのサイズに設定しているからです。
スマートフォンでは項目サイズが大き過ぎるため、横に飛び出てしまう、また、その影響で全体のデザインが崩れてしまうのです。(図1)

このような場合は、CSSで項目の表示サイズを個別に指定することで、スマートフォンに最適なサイズにすることができます。(図2)

form_iphone.jpg

下記のように適用する項目のIDで、テキストのサイズをご指定するCSSを追加します。
※[id="e_708"]の数字部分を適用するフォームの項目IDに変更してください。 

<style type="text/css">
input[id="e_708"]{
width: 200px;
}
</style>

 

PC版でも同様にCSSでの個別サイズ指定が可能ですので、運用に合わせてクライゼルの項目設定と組み合わせてご利用ください。