CODEWITHSUNDEEP
cssruby-on-railsrubyview
Ricky
Ricky

Reputation: 2907

Rails - Error CSS styles

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!

Upvotes: 4

Views: 4936

Answers (2)

rails_id
rails_id

Reputation: 8220

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>

Upvotes: 6

Matthias
Matthias

Reputation: 4375

@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.

Upvotes: 0

Related Questions