7gqmog
Last Updated: February 25, 2016
·
3.225K
· sebastialonso
9b0f7bbf22d65fa2bd23496973c0ba80

Display flash messages with Semantic-UI in Rails

This is inspired in James Brook's proTip.

So, you have the helper:

#app/helpers/application_helper.rb
def flash_class(level)
  case level
  when :success then "ui green message"
  when :error then "ui red message"
  when :notice then "ui blue message"
  end
end

Then in the view

<% flash.each do |key, value| %>
  <div class="<%= flash_class(key) %> closable">
    <i class="close icon"></i>
    <%= value %>
  </div>
<% end %>

A little bit of style for the message

.message.closable {
  margin-left: 20%;
  margin-right: 20%;
 }

And finally the javascript for the fadeOut action

$ ->
  $(".message.closable .close.icon").on "click", ->
    $('.message.closable').fadeOut("slow")
    false
Say Thanks
Respond

4 Responses
Add your response

14517
Ghostwolf

Hey! thanks for the tip. Did this work for devise messages too? doesn't seem to work for me. Cheers!
EDIT: not just devise messages, it doesn't inject the classes in any message :(

over 1 year ago ·
14534
9b0f7bbf22d65fa2bd23496973c0ba80

What is exactly not working? Are the messages being displayed without additional classes or no messages at all?

over 1 year ago ·
17106
Jim cropped

level is being passed to flash_class as a string, not a symbol. Styles didn't work properly until I changed them, as in:
when "success" then "ui green message"

over 1 year ago ·
17108
9b0f7bbf22d65fa2bd23496973c0ba80

That's weird...Thank you for the feedback!

over 1 year ago ·