Wrong color for flash messages under Rails 4.1

[Daniel Kehoe]

The Rails flash message hash contains a key (a "name") and a value (the "message").

Under Rails 4.0, the key is a Symbol.

Under Rails 4.1, the key is a String.

Styling flash messages for display with Bootstrap or Foundation requires parsing the key to determine if it is an alert or a notice. The implementation in the rails_layout gem for Bootstrap looks like this:

<%# Rails flash messages styled for Twitter Bootstrap 3.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "danger" %>">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

Under Rails 4.1, names are Strings and are not matched by the code above, instead getting styled in red with the alert-danger class.

The code for displaying flash messages with Bootstrap should change to accommodate both Rails 4.0 and Rails 4.1:

<div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">

For Foundation, the code should change to this:

<div data-alert class="alert-box round <%= name.to_s == 'notice' ? 'success' : 'alert' %>">

[axenictech]

can u plzz plz help me up with the basic of how can i use alerts in rails4 using bootstrap , i m totally not getting the catch of this ..! if you ca provide with the steps dat would be very helpful contact :: [e-mail]

[Daniel Kehoe]

@axenictech Take a look at Rails and Bootstrap. There's a free example app, a quickstart guide, and even a book.

[Andrew Garcia]

You have probably already figured it out, bc this was posted a long time ago, but I wanted to post a simple answer for everyone else who came across this problem like I did. Not elegant, but heres a solution:

<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
  <% if name == "danger" %>
    <div class="alert alert-danger">
  <% else  %>
    <div class="alert alert-success">
  <% end %>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

and in your controller flash[:danger] or flash[:success] like so:

  flash[:danger] = "You already have a game pending!"
  redirect_to :controller => 'dashboard', :action => 'index'

[Daniel Kehoe]

@drewg233 thanks for the suggestion, but is that a better solution than what's available now in the rails_layout gem?

<%# Rails flash messages styled for Bootstrap 3.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

Rails uses :notice and :alert as flash message keys. Bootstrap provides a base class alert with additional classes alert-success and alert-danger. A bit of parsing is required to get a Rails “notice” message to be styled with the Bootstrap alert-success style. Any other message, including a Rails “alert” message, will be styled with the Bootstrap alert-danger style.

We use each to iterate through the flash hash, retrieving a name and msg that are passed to a block to be output as a string. The expression if msg.is_a?(String) serves as a test to make sure we only display messages that are strings. We construct a div that applies Bootstrap CSS styling around the message. Bootstrap recognizes a class alert to construct an alert box. A class of either alert-success or alert-danger styles the message. Rails notice messages will get styled with the Bootstrap alert-success class. Any other Rails messages, including alert messages, will get styled with the Bootstrap alert-danger class.

We use the Rails content_tag view helper to create a div containing the message.

Finally, we create a “close” icon by applying the class close to a link. We use the HTML entity × (a big “X” character) for the link; it could be the word “close” or anything else we like. Bootstrap’s integrated JavaScript library will hide the alert box when the “close” link is clicked.