Skip to content
By Ben Wiseley

UI Tips for Flash messages in Rails

This is a quick how to to get nice pop-over, auto-fade, auto-hide-on-click flash notices on your site.

Assumptions

Using Rails 3.2 (Asset Pipeline), CoffeeScript, SCSS/SASS, and Twitter/Bootstrap

Tip You can use Twitter/Bootstrap (LESS based) in conjuction with SCSS.
Just use the standard:

 *= require_self
 *= require_tree .

in your app/assets/stylesheets/application.css.scss

Preview

error notice

How to

app/views/layouts/_flash.html.erb

<% if notice || alert %>
  <div class="flash-message <%= notice ? "notice" : ""%><%= alert ? "error" : ""%>">
    <div class="container container_12 clearfix">
      <div class="grid_12">
        <% if notice %>
          <p><%= notice %></p>
        <% elsif alert %>
          <p><%= alert %></p>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

app/assets/stylesheets/applications.css.scss

.flash-message {
  &.error {
    border: solid 4px #900;
          background-color: #FF6565;
        }
  &.notice {
    border: solid 4px #26722D;
          background-color: #A4E7A0;
        }
  color: black;
  z-index: 999;
  position: fixed;
  font-weight: bold;
  width: 96%;
  margin: 20px;
        p {
                font-size: 110%;
                margin: 15px 0;
        }
}

app/assets/javascripts/application.js.coffee

$ ->
  flashCallback = ->
    $(".flash-message").fadeOut()
  $(".flash-message").bind 'click', (ev) =>
    $(".flash-message").fadeOut()
  setTimeout flashCallback, 3000

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email