Dynamic flash messages in jade

Question

I am trying to make a dynamic page where the flash messages are only shown when there's an actual flash message.

The text of the message is only shown when the if statement is true, but the div with it's background color is always shown (the classes are bootstrap). I also tried adding custom CSS to the div's but the same problem appears.

The template engine I am using is Jade with Express.

div.wrapper  
      if success_msg
        div.alert.alert-success #{success_msg}      
      if error_msg
        div.alert.alert-danger #{error_msg} 
      if error
        div.alert.alert-danger #{error}   

      block content

EDIT

The first screenshot isn't supposed to show the div's inside the if statements.

Can you please more descriptive on what the problem is, and what you are trying to accomplish. — mattdevio, Mar 16 '17 at 18:45

score 0 · Answer 1 · answered Mar 16 '17 at 19:07

Fixed it with this code:

div.wrapper  
      if success_msg != ''
        .alert.alert-success #{success_msg}      
      if error_msg != ''
        .alert.alert-danger #{error_msg} 
      if error != ''
        .alert.alert-danger #{error}   

      block content

Dynamic flash messages in jade

1 Answers1