CSS styling of flash message

Question

What should I use to style my flash messages in my CSS? I can't seem to change it's styling. Here's the relevant code within the <body> of 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 relevant original CSS was something like this but it doesn't currently work.

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

For the HTML and CSS you are using, this should work. Are you sure you're including the CSS file in your header? If it's the Rails tutorial, you should have `render 'layouts/stylesheets'` a bit farther in your layout, which should in turn have `stylesheet_link_tag 'blueprint/screen', :media => 'screen'` in it (in `app/views/layouts/_stylesheets.html.erb`). See [here](https://github.com/BinaryMuse/rails-book/blob/master/app/views/layouts/application.html.haml#L8) and [here](https://github.com/BinaryMuse/rails-book/blob/master/app/views/layouts/_stylesheets.html.haml) (although I'm using Haml). — Michelle Tilley, Mar 04 '11 at 05:50
Yep it is blueprint's CSS and I definitely am including the CSS file. Not sure why styling doesn't work all of a sudden but it must have something to do with the ajax rendering I just implemented for it. — Justin Meltzer, Mar 04 '11 at 05:52
Inspect the HTML and ensure that the classnames you expect are being set. — Andrew Marshall, Mar 04 '11 at 05:57
Could it have anything to do with the `
` I added around the block so that the ajax would have an id to `getElementbyId`? — Justin Meltzer, Mar 04 '11 at 05:58
Use FireBug (or IE 8's developer tools) to check what the browser thinks which CSS it was supposed to apply (and why). — Christopher Creutzig, Mar 04 '11 at 08:02
Maybe the key is printing out as a symbol, try "key.to_s" instead of "key" — coder_tim, Mar 04 '11 at 08:04
This is probably insignificant, but try getting rid of the space between id= and "notice" — coder_tim, Mar 04 '11 at 08:16
Alright here's what's happening. The CSS is not responding to the `flash` or `<%= key %>` classes, but it is responding to the `notice` id. Unfortunately, if I style with the `notice` id, some styling appears that should be dependent on whether there is a flash message or not. How can I fix this? — Justin Meltzer, Mar 04 '11 at 17:45
Why are you posting this question twice? http://stackoverflow.com/questions/5197677/weird-css-conundrum — the Tin Man, Mar 04 '11 at 21:57
Because literally no one has been able to figure this out, so once I make a little leeway on the issue, I want to post the question again with my new information. No one on SO has been significantly helpful with this issue, and everyone seems to misunderstand it. — Justin Meltzer, Mar 04 '11 at 22:01

score 3 · Answer 1 · edited May 23 '17 at 12:09

3

Either add a rule for parent div with id notice:

#notice {
  css_formatting_here
}

Or add a rule for child divs:

.flash {
  css_formatting_here
}

The child div of errors container has multiple classes separated by whitespace. flash is one of them. Thus you can add a CSS rule for that class, and it will work.

Look here for more such examples: Hidden features of CSS

edited May 23 '17 at 12:09

Community

1
1

answered Mar 04 '11 at 09:53

Nikita Barsukov

2,957
3
32
39

Alright here's what's happening. The CSS is not responding to the flash or <%= key %> classes, but it is responding to the notice id. Unfortunately, if I style with the notice id, some styling appears that should be dependent on whether there is a flash message or not. How can I fix this – Justin Meltzer Mar 04 '11 at 17:48
@Justin Meltzer - can you give a raw HTML output of the div in question, not Rails code? – Nikita Barsukov Mar 04 '11 at 20:03
It's not helpful. It just shows a div with the text inside and id `notice` Here's all of my code: https://github.com/meltzerj/sample_app – Justin Meltzer Mar 04 '11 at 20:06

score 0 · Answer 2 · answered Apr 02 '16 at 21:46

0

In your css file type:

.alert-success {
    dosomestyling;
}

.alert-danger {
    dosomestyling;
}

answered Apr 02 '16 at 21:46

Rasool

173
2
10

zetetic · Answer 3 · 2011-03-04T19:11:43.167

0

Looks like the CSS calls for a class .notice, but the div has an ID instead.

EDIT

The CSS is not responding to the flash or <%= key %> classes, but it is responding to the notice id. Unfortunately, if I style with the notice id, some styling appears that should be dependent on whether there is a flash message or not. How can I fix this

You could add a conditional test around the div:

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

edited Mar 04 '11 at 19:11

answered Mar 04 '11 at 06:19

zetetic

47,184
10
111
119

The code in question is: `
<%= value %>
`, not the line above it. – Michelle Tilley Mar 04 '11 at 06:21
Alright, alright! What, I have to actually *read* the questions now? Sheesh. – zetetic Mar 04 '11 at 08:45
Could you please remove this answer to give more visibility to the question? Thx – apneadiving Mar 04 '11 at 09:07
@Brandon Tilley - root element of that div has ID notice – Nikita Barsukov Mar 04 '11 at 09:55
I'm not sure what you mean by root element, but this is the problem: The CSS is not responding to the flash or <%= key %> classes, but it is responding to the notice id. Unfortunately, if I style with the notice id, some styling appears that should be dependent on whether there is a flash message or not. How can I fix this – Justin Meltzer Mar 04 '11 at 18:01

CSS styling of flash message

3 Answers3

Linked