問い合わせフォームのチェックのために、空欄で実行しようとすると、必須項目ですとテキストが出るようにしたのですが、SPサイズの時、フッターまではみ出てしまいます。

Question

問い合わせフォームのチェックのために、空欄で実行しようとすると、必須項目ですとテキストが出るようにしたのですが、SPサイズの時、フッターまではみ出てしまいます。

青い部分がフッターなのですが、問い合わせフォームの背景がレスポンシブの背景なので、問い合わせフォーム自体をpositionで配置しているので、必須項目が付くとはみ出てしまいます。

PCは余裕を持たせているので大丈夫ですがSPは3文字分も余裕を持つとホワイトスペースが多すぎておかしくなってしまいます。

実務でこのような場合jqueryでその場合のみ背景の縦幅を3文字分増やしますか？
それともそこまで気にしないでしょうか？

Comments

[Takamoso]

HTMLとCSSソースコードの提示を

Answer 1

実務だと自分は作りを見直します。というのも、お客さんがまず真っ先に指摘してくるのはこういった見た目の違和感だからです。

背景の縦幅を増やす以外にも、positionで配置するというレイアウトをやめるとか、警告の文字は画面内に表示せずにポップアップで表示するとか回避策は色々あるかと思います。

Comments

[退会済みユーザー]

やっぱり誰でもわかる見た目にクライアントさんはこだわるのですね。

警告の文字は画面内に表示せずにポップアップで表示するとか回避策は色々あるかと思います。
とはpositionを使って必須項目ですというspanを配置すれば無用に大きくならないということですかね？

[hitsujimeeee]

自分としては、alert()等で画面外(別ウインドウ？)で警告を見せるといったイメージで言ったつもりですが、やりかたは色々あると思います。

[退会済みユーザー]

ポップアップメッセージでそのサイト内ではなくダイアログとして、表記させるということですね。

[hitsujimeeee]

その通りです( *・ω・)b

[退会済みユーザー]

https://codepen.io/anon/pen/bBxqjR
その後このようにしたのですが、うまく再現ができていません。

私の環境ではなぜか、ボタンを押しても反応しませんが、うまくできているという環境の方もいるようです。
ただこのやり方送信ボタンを押しまくるとどんどん背景が縦に長くなってしまう問題があり、確認できると思います。

空の状態で一度押すと、中にテキストを入れて縦が元のサイズに小さくなった時のみ、もう一度空にしたときに押すと伸びるという風にしたいです。
toggleclassしかないですかね？