All geek questions in one place

CSS style flash messages

What should I use to style my flash messages in my CSS? I can’t change the style. Here is the corresponding code in the <body> my application layout:

  <div class="container"> <%= render 'layouts/header' %> <section class="round"> <div id= "notice"> <% flash.each do |key, value| %> <div class="flash <%= key %>"> <%= value %> </div> <% end %> </div> <%= yield %> </section> <%= render 'layouts/footer' %> <%= debug(params) if Rails.env.development? %> </div>

The corresponding original CSS was something like this, but currently it does not work.

 .error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;} .success {background:#e6efc2;color:#264409;border-color:#c6d880;}
+4
source share
3 answers

Or add a rule for the parent div with id notification:

 #notice { css_formatting_here }

Or add a rule for child divs:

 .flash { css_formatting_here }

There are several classes in the child div of errors container, separated by spaces. flash is one of them. This way you can add a CSS rule for this class and it will work.

Check out more examples here: CSS Hidden Functions

+2
source

It looks like CSS calls for the .notice class, but the div has an identifier.

EDIT

CSS does not respond to flash or <% = key%>, but it does respond to a notification id. Unfortunately, if I am an id notification, some stylization appears, which should depend on whether the flash message is or not. How can i fix it

You can add conditional test around div:

 <% unless flash.empty? %> <div id="notice"> <% flash.each do |key, value| %> <div class="flash <%= key %>"> <%= value %> </div> <% end %> </div> <% end %>
0
source

In your css file type:

 .alert-success { dosomestyling; } .alert-danger { dosomestyling; }
0
source

Source: https://habr.com/ru/post/1342235/

More articles:


All Articles