Last Updated: January 22, 2019
· sebastialonso

Display flash messages with Semantic-UI in Rails

This is inspired in James Brook's proTip.

So, you have the helper:

def flash_class(level)
  case level
  when :success then "ui green message"
  when :error then "ui red message"
  when :notice then "ui blue message"

Then in the view

<% flash.each do |key, value| %>
  <div class="<%= flash_class(key) %> closable">
    <i class="close icon"></i>
    <%= value %>
<% 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", ->

5 Responses
Add your response

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 ·

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

over 1 year ago ·

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 ·

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

over 1 year ago ·

I know these posts are all from a year ago however I found this post to be pretty helpful and was able to make the modifications i needed for it to work with devise and the latest version of Semantic-UI.

over 1 year ago ·