初心者からのエンジニア日記

2020年6月末~TECH::CAMPにて本格的にプログラミング学習を開始。 販売職/店長を経て、駆け出しエンジニアの道へ一歩踏み出しました! 様々なアウトプットをしていきたいと思います! HTML/CSS,RUby,Ruby on Rails

【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 < 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