The Bootstrap Alert div stubbornly lingers even in the absence of any messages

Question

The Bootstrap Alert div stubbornly lingers even in the absence of any messages

I have implemented an error message alert bar on my website. However, I am facing an issue where the alert bar remains visible even when there are no messages to display. Can anyone provide guidance on how to make this alert bar appear only when there is a message?

Below is the code for my alert system:

<div class="alert alert-success">
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul>
        {% for message in messages %}
            <li>{{ message }} </li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
</div>

html css twitter-bootstrap

Answer 1

Answer №1

Organize your conditions within a alert division, as shown below:

{% set notifications = get_flashed_messages() %}
{% if notifications %}

<div class="alert alert-success">
    <ul>
        {% for notification in notifications %}
        <li>{{ notification }} </li>
        {% endfor %}
    </ul>
</div>

{% endif %}
{% endset %}
{% block content %}{% endblock %}

Expect this explanation to be beneficial!

Answer 2

Organize your conditions within a alert division, as shown below:

{% set notifications = get_flashed_messages() %}
{% if notifications %}

<div class="alert alert-success">
    <ul>
        {% for notification in notifications %}
        <li>{{ notification }} </li>
        {% endfor %}
    </ul>
</div>

{% endif %}
{% endset %}
{% block content %}{% endblock %}

Expect this explanation to be beneficial!

The Bootstrap Alert div stubbornly lingers even in the absence of any messages

Answer №1

Similar questions

Ensure consistency in CSS3 background color transitions

Interacting between frames with jQuery

Align the text vertically within a list item

Animating elements outside of the current route when the route changes in Angular

The art of styling <li> elements compared to <a> elements

Issue with VueJS where the datalist input does not reset the value

Creating an HTML executable file from an interactive map generated in R using leaflet-shiny

Font consistency varies between different operating systems or machines

Modify the style of ckeditor's <span> attribute

Populating a Dropdown Menu with JSON Data using JavaScript

The variable in my scope is not reflecting the changes in the HTML view

Issue with background opacity not functioning properly in Internet Explorer 8

Solving the Size Problem with Bootstrap 5 Off Canvas

Unable to modify the 'src' attribute of an Iframe using JavaScript

Guide on how to forward to a different page after handling a post request in Node.js

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

I need assistance with displaying this array either using CSS styling or in table format. Can someone please

Ensure that buttons appear neat and organized when viewed on mobile devices

Code that achieves the same functionality but does not rely on the

Implementing a background image layered over a background color using CSS