はじめに

チーム開発でフリマアプリを模したものを開発しています。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をかけてあげましょう。
（他の対処法パターンについては確認しきれていません）

参考にさせていただいた記事

所感

deviseはこういった細かい設定まで作り込まれているので、うまく使いこなすためにも、特性を理解して仲良くしていきたいと思います。。