【Rails】scaffold form_with エラーメッセージ表示時のデザイン崩れ解決法

scaffoldで作成したform_withのバリデーションエラーメッセージ表示時のデザイン崩れ解決法についてご紹介します。

デフォルトでは、エラー表示時に以下のようにradio_buttonのデザイン崩れが発生してしまいます。この解決法について

radio_buttonのclass名を検証で確認すると、「field_with_errors」となっています。

そこで、この「field_with_errors」が設定されているファイルを確認すると、以下のように指定されています。

.field_with_errors {
  padding: 2px;
  background-color: #f8d7da;
  display: table;
}

この中の、display: table;が原因でデザイン崩れが発生していましたので、ここを以下のように変更します。

.field_with_errors {
  padding: 2px;
  background-color: #f8d7da;
  display: inline;
}

これで、以下のようにデザイン崩れがなくなりました！