Rails - Error CSS styles

Question

New to rails, and am experimenting with changing default layouts.

It seems that the .field_with_errors class is always being added to my forms, when a field causes a validation error. The default scaffold CSS defined field_with_errors as:

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

My question is: Why even use this .field_with_errors? Where is it even coming from? Same with a div with ID of notice to print success messages. Where is this coming from?... From my research both of these coming somewhere from ActionView::Helpers.

But what if I wanted to use my own custom styles for these? Do I have to write my own .fields_with_errors and notice classes in my application.css.scss file? I tried this and it works... But why do I have to jail myself to those class names? What if I wanted to call them something else? Can I do this?

Secondly, let's say I have my own custom CSS classes now (assuming it's possible -- which I hope it is)... What if I wanted to apply a bootstrap style to them? For example, bootstrap would use <div class="alert alert-success"> where Rails' scaffold would default to using <div id="#notice">... How can I make such changes in the most elegant way without simply making my own style with the same CSS code as Twitter's alert alert-success.... Isn't there a way in SASS (or through Rails somehow) to say, Success messages are printed with XYZ style and error fields are printed with ABC style... Like maybe in some config file?

Thanks!

rails_id · Accepted Answer · 2013-05-30 19:15:54Z

6

Can I do this? yes.

The extra code is being added by ActionView::Base.field_error_proc. If you want to call something else and you're not using field_with_errors to style your form, You should override it in config/application.rb

config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
     "<div class='your class'>#{html_tag}</div>".html_safe 
}

Restart your server

Secondly, If you want to apply a bootstrap style to them, You can save your selection style on application_helper.rb

module ApplicationHelper
 def flash_class(level)
     case level
     when :notice then "alert alert-info"
     when :success then "alert alert-success"
     when :error then "alert alert-error"
     when :alert then "alert alert-error"
     end
 end
end

create file layouts/_flash_message.html.erb and paste this :

<div>
  <% flash.each do |key, value| %>
    <div class="<%= flash_class(key) %> fade in">
      <a href="#" data-dismiss="alert" class="close">×</a>
      <%= value %>
    </div>
  <% end %>
</div>

and to call the flash you just render in view

<%= render 'layouts/flash_messages' %>

Example

On accounts_controller.rb create action

  def create
  @account = Account.new(params[:account])
  if @account.save
     # using :success if @account.save
     flash[:success] = "Success."
     redirect_to accounts_url
  else
    flash[:alert] = "Failed."
    render :new
  end
  end

Put on top of accounts/index.html.erb and on top of form in accounts/_form.html.erb

  <%= render 'layouts/flash_messages' %>

Result on index :

<div class="alert alert-success">
   <button type="button" class="close" data-dismiss="alert">×</button>
   Success.
</div>

Result on form :

 <div class="alert alert-error">
     <button type="button" class="close" data-dismiss="alert">×</button>
     Failed.
 </div>

edited May 30, 2013 at 19:15

answered May 30, 2013 at 17:07

rails_id

8,2204 gold badges48 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ricky Over a year ago

Thanks for the detailed response. I'm trying the first part to override the style, but it doesn't seem to work. I put the code within my application.rb file exactly as you have it, and changed the class to my custom class. When I render the page again, it's still showing field_with_errors as the error class name rather than the custom class that I inserted error_fields

Ricky Over a year ago

on that note... what is the correct practice as far as overriding these default styles go? For example, I imagine the default layout does not suffice for anyone wanting good UI :-) So how do people normally override it? Does standard practice say to override the proc? Or do people just keep .fields_with_errors as the class and write their on CSS for it?

rails_id Over a year ago

Have you restart server after you add them to application.rb ?

rails_id Over a year ago

In one situation I rewrote ActionView::Base.field_error_proc (there is a rails cast on it). If you want to modify it to suit your taste, for example : you can using a little nokogiri, you changed the proc to add the error messages to the input/textarea element's data-error attribute instead of wrapping them in an error div.

rails_id Over a year ago

There are many more ways to do it all. Ref : Customize Field Error , error_messages_for, Configuring Action View

Matthias · Accepted Answer · 2013-05-30 17:14:19Z

0

@anonymousxxx answer seems to be correct in my opinion.

I would recommend you to use the twitter-bootstrap-rails gem (https://github.com/seyhunak/twitter-bootstrap-rails) for your css. check out the readme on github, this gem is really convenient.

answered May 30, 2013 at 17:14

Matthias

4,3852 gold badges28 silver badges34 bronze badges

Collectives™ on Stack Overflow

Rails - Error CSS styles

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related