0

I am rendering a page in Python Quart (as a blueprint) using:

return await render_template(self.TEMPLATE_LOGIN_PAGE)

The issue is that the error message is not rendering correctly - it's rendering

  • No red colour
  • Incorrect position
  • Using Developer Tools in Chrome it's not showing the styling

If I run the exact same page natively as a file in Chrome it works correctly, is there some additional code I need? I assume the HTML is correct.

html:

  <!doctype html>
  <html lang="en">
    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Bootstrap CSS -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">

      <link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">

      <title>Integrated Test Management Suite | Login</title>
    </head>

    <body>

      <div class="wrapper">
          <div class="card">
              <form action="#" class="d-flex flex-column">
                  <div class="h3 text-center text-white">Login</div>
                  <div class="d-flex align-items-center input-field my-3 mb-4"> <span class="far fa-user p-2"></span> <input type="email" placeholder="Email" required class="form-control"> </div>
                  <div class="d-flex align-items-center input-field mb-4"> <span class="fas fa-lock p-2"></span> <input type="password" placeholder="Password" required class="form-control" id="pwd"> <button class="btn" onclick="showPassword()"> <span class="fas fa-eye-slash"></span> </button> </div>
                  <div class="d-sm-flex align-items-sm-center justify-content-sm-between">
                      <!--
                      <div class="d-flex align-items-center"> <label class="option"> <span class="text-light-white">Remember Me</span> <input type="checkbox" checked> <span class="checkmark"></span> </label> </div>
                      <div class="mt-sm-0 mt-3"><a href="#">Forgot password?</a></div>
                      -->
                  </div>
                  <div class="jumbotron" id="error_msg" class="jumbotron text-black">error_msg</div>
                  <div class="my-3"> <input type="submit" value="Login" class="btn btn-primary"> </div>
                  <div class="mb-3"> <span class="text-light-white">Don't have an account?</span> <a href="#" onclick="return false;">Sign Up</a> </div>
              </form>
              <div class="position-relative border-bottom my-3 line"> <span class="connect">or connect with</span> </div>
              <div class="text-center py-3 connections">
                  <a href="https://wwww.facebook.com" target="_blank" class="px-2" onclick="return false;"> <img src="https://www.dpreview.com/files/p/articles/4698742202/facebook.jpeg" alt=""> </a>
                  <a href="https://www.google.com" target="_blank" class="px-2" onclick="return false;"> <img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" alt=""> </a>
               </div>
          </div>
      </div>
      
      </div>

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    </body>
  </html>

css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif
}

body {
    background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 93vh
}

.wrapper {
    max-width: 500px;
    margin: 50px auto
}

.wrapper .card {
    max-width: 400px;
    min-height: 450px;
    margin: 30px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    cursor: pointer;
    padding: 0.8rem
}

.wrapper .card a {
    text-decoration: none;
    color: #eee
}

.wrapper .card a:hover {
    color: #fff
}

.wrapper .card .input-field {
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #eee;
    padding: 0.3rem
}

.wrapper .card .input-field input {
    background-color: inherit
}

.wrapper .card .input-field input.form-control,
.wrapper .card .input-field input.form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
    color: #eee
}

.wrapper .card .input-field button.btn {
    color: #eee;
    padding: 0rem;
    padding-right: 0.5rem
}

.wrapper .card .input-field button.btn:hover {
    color: #fff
}

.wrapper .card .input-field button.btn:focus {
    border: none;
    outline: none;
    box-shadow: none
}

.wrapper .card .input-field input::placeholder {
    color: #eee
}

.wrapper .card .option {
    display: block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    user-select: none
}

.wrapper .card .option span.text-light-white:hover {
    color: #fff
}

.wrapper .card .option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-radius: 2px
}

.wrapper .card .option:hover input~.checkmark {
    background-color: #f1f1f1
}

.wrapper .card .option input:checked~.checkmark {
    border: none;
    background-color: #333;
    transition: 300ms ease-in-out all
}

.checkmark:after {
    content: "\2713";
    position: absolute;
    display: none;
    color: #fff;
    font-size: 1rem
}

.wrapper .card .option input:checked~.checkmark:after {
    display: block
}

.wrapper .card .option .checkmark:after {
    left: 3px;
    top: -3px;
    width: 5px;
    height: 10px
}

.wrapper .card .btn.btn-primary {
    border-radius: 20px;
    width: 100px;
    background-color: #fff;
    color: #333;
    border: none
}

.wrapper .card .btn.btn-primary:hover {
    color: #fff;
    background: #333
}

.wrapper .card .btn.btn-primary:focus {
    border: none;
    box-shadow: none
}

.wrapper .card .text-light-white {
    color: #ddd
}

.wrapper .card .line span.connect {
    position: absolute;
    top: -12px;
    left: 33%;
    color: #000;
    padding: 0 0.3rem;
    z-index: 100;
    border-radius: 2px;
    background-color: #fff
}

.wrapper .card .connections a img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

#error_msg
{
    background: #ff4d4d;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

@media(max-width: 370px) {
    .wrapper .card .line:after {
        left: 27%
    }
}

@media(max-width: 350px) {
    .wrapper {
        margin: 10px auto
    }

    .wrapper .card {
        margin: 10px
    }
}
Swatcat
  • 73
  • 6
  • 21
  • 57
  • did you check tab `Network` in DevTools to see if server sends CSS file? In some frameworks you have to put static files in correct folder. And some framework serve static files only if you run in DEBUG mode. In normal mode you have to run it with more robust servers like Apache/NGINX - and then Apache/NGINX has to serve static files because it make it much faster. – furas Jun 13 '21 at 02:56
  • @furas It is sending CSS files, the rest of the page is being correctly styled – Swatcat Jun 13 '21 at 10:07

1 Answers1

1

Apologies, it seems that it wasn't an issue, it was just Chrome trying to be overly clever and page caching. :(

Swatcat
  • 73
  • 6
  • 21
  • 57