はじめに
チーム開発でフリマアプリを模したものを開発しています。deviseのエラーメッセージ表示によるビュー崩れがあり、修正対応に少しハマったので、簡単ですが対処法を残しておきます。
環境
rails (5.2.4.2)
devise (>= 4.7.1)
devise-i18n (1.9.1)
devise-i18n-views (0.3.7)
■ユーザー登録画面 初期状態です
■ユーザー登録に必要な項目の入力漏れがあると下図のようにエラーメッセージが表示されます。
（deviseの標準機能です。デフォルトが英語なので、日本語化する為にdevise-i18nというgemを導入しています）
ビューの縦方向のずれは、これらの要素を包んでいる親要素にheight:autoをかければ対応できます。
deviseのエラーメッセージ表示でビュー崩れ発生
問題は次です。
ユーザー登録画面の下部に移ります。
■ユーザー登録画面 初期状態です
■deviseエラーメッセージ表示時の、ページ下部の様子です。生年月日のビューが崩れていますね。。
エラーメッセージ表示有無によって何が違うのでしょうか。
検証ツールをよく見ると、エラーメッセージ表示時に
<div class="field_with_errors">
というdiv要素が自動的に生成されていますね。（！）
エラーメッセージ表示前のビューをいくら整えても、表示後のビューを確認してびっくり。
さっき直したはずなんだけどなんで崩れてるんだろう、、、ってなります。
対処法
上記のdiv要素が自動生成されてしまうのは仕方ないので、この要素に対してCSSでdisplay: contentsをかけてあげましょう。
（他の対処法パターンについては確認しきれていません）
参考にさせていただいた記事
https://yukimasablog.com/rails-field-with-errors
所感
deviseはこういった細かい設定まで作り込まれているので、うまく使いこなすためにも、特性を理解して仲良くしていきたいと思います。。