【Rails】レンダリング時のビュー崩れを一瞬で解決！

バリデーションを設定し、

画像と名前が空の状態で投稿ができないようにした。

posts_controller.rb

def create
  @post = Post.create(post_params)
  if @post.save
    redirect_to "/", notice: "投稿を保存しました"
  else
    flash.now[:alert] = "画像と名前を入力してください"
    render :new
  end

しかしrenderメソッドで部分テンプレートを呼び出すと

ビュー崩れが起こる。

原因

検証ツールで確認すると、

部分テンプレート呼び出し後に問題の起こったclassが

field_with_errorsというクラス名のdivタグで囲まれていた。

解決策①

ビュー崩れを起こすCSSファイルに以下の記述を追加する。

.field_with_errors {
  display: contents;
}

解決策②

field_with_errorsクラスが自動挿入されないように以下を記述する。

config/application.rb

module SampleApp
  class Application &lt; Rails::Application
          # 省略
    config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }
  end
end

サーバーを再起動するとビュー崩れがなくなる。

解説

バリデーションエラーを表示させる際にエラーが起こったのは、Railsが元より

エラーメッセージを含むフィールドを

自動的にfield_with_errorsクラスを持つdivタグで囲むためです。

以上！

少しでも参考になれば幸いです！

参考URL↓

https://yukimasablog.com/rails-field-with-errors