Rails error and notice flash not showing properly with css styling

Question

I have a simple controller which checks the validity of an ActiveModel. If the model is valid it displays :success flash message. If it is not, it displays error flash message. The success flash message is displayed correctly (green font and background). The error message is not displayed correctly (font is not red on red background). I've noticed that the same applies to the :notice flag. When I changed the :error flag to :warning it displays correctly (yellow font on yellow background). I suppose it is some sort of weird css issue but I don't know how to debug it. Any suggestions?

Here is the code of the controller:

class SmsController < ApplicationController
  def send_text_message
    phone = PhoneNumber.new(pnumber: params[:phone]) 
    puts 'phone = ' + phone.pnumber
    if phone.valid?
      # code that sends a sms message..
      flash[:success] = "Message has been sent!"
      redirect_to :back
    else
      flash[:error] = "This is not a valid mobile number" #phone.errors.full_messages.join(". ")
      redirect_to :back
    end
  end
end

Here is the application.html.erb:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Appointment Save: ">
<title>Appointment Mate</title>
<%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
 <!-- Fixed navbar -->
 <%= render 'layouts/header' %>
 <div class="container">
 <% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
 <% end %>
 <%= yield %>
 </div>
 <%= render 'layouts/footer' %>
 <!-- Bootstrap core JavaScript ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!--%= javascript_include_tag "bootstrap.min" %-->
 <!--script src="assets/bootstrap.min.js"></script-->
</body>
</html>

Here is the view:

<div class="col-sm-offset-4 col-sm-4">
<br></br>
<br></br>
<br></br>
<%= bootstrap_form_tag url: '/sms/send' do |f| %>
  <%= f.telephone_field :phone, label: "Enter a valid UK mobile phone number"%>
  <%= f.submit "Send a reminder", class: "btn-custom-lighten btn-lg" %>
<% end %>
</div>

Here is the screenshot of a :success flash:

enter image description here

Here is the screenshot of an :error flash:

enter image description here

As you can see, the error flash is shown in plain font and no background. When the flag in the controller is changed to :warning the font and the background are set correctly. So it is just the :error flash and the :notice flag which are not displayed correctly. What to do about it?

BigRon BigRon · Accepted Answer · 2016-05-26T19:09:35

TL;DR For your use case you should be using flash[:danger], rather than flash[:error].

I can see from your code that you are using Bootstrap, i.e:

<div class="col-sm-offset-4 col-sm-4">

In bootstrap the styled flash classes are shown here:

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Then in your application.html.erb code above you have:

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
 <% end %>

You can see that your above code will create a div matching bootstrap's class naming for alerts as long as your flash message_type matches a bootstrap alert class, i.e. flash[:success], flash[:info], flash[:warning], or flash[:danger]

Alternatively you could modify your <% flash.each %> code in application.html.erb, but that would be pretty smelly.

Rails error and notice flash not showing properly with css styling

2 Answers