Question

Im using twitter bootstrap to style my app.

This is my controller action used to define the flash msg:

def generate_rating_set
  redirect_to "/", :flash => { :notice => "New Set Successfully Created." }
end

and in my view

<div class="alert alert-success"><%= flash[:notice] %></div>

and my css

.alert {
   font-weight: bold;
   -moz-border-radius: 4px 4px 4px 4px;
   -webkit-border-radius: 4px 4px 4px 4px;
   border-radius: 4px 4px 4px 4px;
   margin-bottom: 18px;
   padding: 12px 25px 12px 24px;
   -moz-box-shadow: 3px 3px 1px 1px #CCCCCC;
   -webkit-box-shadow: 3px 3px 1px 1px #CCCCCC;
   box-shadow: 3px 3px 1px 1px #CCCCCC;
}
.alert-success {
   background-color: #66E167;
   border-color: #D6E9C6;
   width: 280px;
   color: black;
   padding-top: 20px;
}

The flash message displays as expected, however the css styling is always being displayed. How do I hide the styling to only display when the flash message is being displayed.

Answer 1

Here’s a helper I use to display my flash messages:

def show_flash(options = {})
    output = ActiveSupport::SafeBuffer.new

    [:alert, :notice].each do |message|
        output << content_tag(:p, class: [message, options[:class]], tabindex: '0') do
            flash[message]
        end if flash[message].present?

        flash[message] = nil
     end

     output
end

The point is, you don’t want to display the container of the flash message if there are none.