ruby-on-railstwitter-bootstrapzurb-foundationrailsappsruby-on-rails-4.1

Wrong color for flash messages under Rails 4.1 with Bootstrap or Foundation


The following code displays Rails flash messages using Bootstrap 3.0:

<%# 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 %>

The code is from the article Bootstrap and Rails.

Similar code from the article Foundation and Rails can be used with Foundation:

<%# Rails flash messages styled for Zurb Foundation 5.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div data-alert class="alert-box round <%= name == :notice ? "success" : "alert" %>">
      <%= content_tag :div, msg %>
      <a href="#" class="close">&times;</a>
    </div>
  <% end %>
<% end %>

For either Bootstrap or Foundation, when I upgrade my application from Rails 4.0 to Rails 4.1, all flash messages appear in red, even "notice" messages which should appear in green.

What's changed in Rails 4.1 to break this code?


Solution

  • Found my own answer...

    I've revised my Rails and Bootstrap tutorial and updated the rails-bootstrap example app accordingly.

    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.

    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.

    To fix it, 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' %>">