Html Question posted in
Some basic documentation can be found here.

Html – Banner is not displaying at the top and css is not working

I have html like following, in my Django project

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index Page</title>
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon.png' %}">
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>

<div id="error-banner" class="error-banner" style="display: none;"></div>

<header>
    <div class="header-content">
        <!--some header contents-->
    </div>
</header>
<div>
      <!--some other divs-->
</div>

<script>
    function showErrorBanner(message) {
        var banner = document.getElementById('error-banner');
        banner.textContent = message;
        banner.style.display = 'block';

        setTimeout(function() {
            banner.style.display = 'none';
        }, 10000); // 10 seconds
    }
        
    {% if error_message %}
    showErrorBanner("{{ error_message }}");
    {% endif %}
</script>
</body>
</html>

My signin_view is like following:

def signin_view(request):
    if request.method == 'POST':
        form = AuthenticationForm(request, data=request.POST)
        if form.is_valid():
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password')
            user = authenticate(request, username=username, password=password)
            if user is not None:
                login(request, user)
                return redirect('login')  # Change 'home' to the name of your homepage URL pattern
            else:
                error_message = "Invalid username or password."
        else:
            error_message = "Invalid form submission."
    else:
        form = AuthenticationForm()
        error_message = None
    return render(request, 'login.html', {'login_form': form, 'error_message': error_message})

and entire style.css is like following

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('resources/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

header {
    background-color: rgba(87, 184, 148, 0.8);
    padding: 10px 20px;
    color: white;
    position: absolute;
    top: 0;
    width: 100%;
}

.header-content {
    display: flex;
    justify-content: flex-end;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

nav ul li a:hover {
    text-decoration: underline;
}

.form-container {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.form-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.form-toggle button {
    background-color: #57B894;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.form-toggle button:hover {
    background-color: #469D7B;
}

.form-content {
    display: none;
}

.form-content.active {
    display: block;
}

form input {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

form button {
    background-color: #57B894;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #469D7B;
}

form p {
    margin: 10px 0 0;
}

form a {
    color: #57B894;
    text-decoration: none;
}

form a:hover {
    text-decoration: underline;
}


  .required-field {
        position: relative;
    }

    .required-field input {
        padding-left: 15px; /* Adjust as needed */
    }

    .required-field span {
        position: absolute;
        left: 0;
        top: 0;
        color: red;
        font-size: 20px; /* Adjust size as needed */
        line-height: 1;
    }

    .error-banner {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    text-align: center;
}

the issue is that whenever there are incorrect credentials then it show the banner but not at the top and it disappears after 10 seconds as expected. currently it shows it like this

enter image description here

I am using PyCharm Professional. I have invalidated caches, restarted PyCharm and my system as well. Please let me know what is messing this.

Tags:

2

Answers


  1. 0

    This issue is likely related to CSS rules in correctly positioning the error banner at the top of the page. Try the following updates to the ‘.error-banner’ class. Hopefully, this ensures the banner is fixed at the top of the page and spans the full width.

    .error-banner {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
margin: 10px 0;
border: 1px solid #f5c6cb;
border-radius: 4px;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;

    }

    Login or Signup to reply.
  2. 0

    Based on what you provided maybe You need to change down the display:flex on your body to display:grid or keep the display:flex and add flex-direction:column, though it will honestly be better to not keep the .error-banner as a direct child of body and include it in a seperate div along with the form.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search