field_with_errorsによるレイアウト崩れを防ぐ - Qiita

実装したいこと 新規会員登録機能バリデーションを設定し、入力項目にエラーがある場合はエラーメッセージとともに、入力ページに戻るように設定してします。 この時下の写真のようにレイアウト崩れが発生しますので、この事例について修正します。 初回入力時 再入力時（レイアウト崩れ） レイアウト崩れの原因 この事象の原因は、エラーが発生している時Railsが自動的にfield_with_errorsクラスを持つdivタグで、labelタグやinputタグを囲むことによって発生します。横並びになっている２つのinputタグそれぞれをdivダグで囲むため、改行されて表示されています。 .contents-field = f.label :お名前（全角） %span.contents-field__require 必須 %br = f.text_field :family_name, class:"cont