'CSS Style Disappears on Form Button Click

I have a side panel menu that is styled how I want, along with a top nav bar. When I press the add button the form gets submitted but the style disappears on the side panel menu. See pictures and code:

Here is the style that I expect to see with the side bar. Working Style

Here is what happens once I press Add to associate a mac address. Not Working Style

The python flask app that has the base page request and the associate customer function that is run. (Commented out to test and not write to a database) Flask Python App

*{
    margin:0;
    padding:0;
}

ul {
    list-style-type: none;
    width: 15%;
    position: fixed;
    height: 100%;
    line-height: 60px;
    background-color: rgb(180, 175, 175);
}

ul li {
    display: block;
    width: 100%;
}

ul li a {
    display: block;
    text-align: center;
    text-decoration: solid;
    color:black;
    transition: transform 1s ease-in-out
}

ul li a:hover {
    transform: translate(10%, 0);
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 5px;
}  


.box {
    float: right;
    width: 85%;
    height: 1600px;
    text-align: center;
    background-color: cadetblue;
    color:black;
}

{% extends "base.html" %}
{% block body %}
{% include "navbar.html" %}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
    <title>Devices</title>
    <link rel="stylesheet" type="text/css" href="../static/css/sidebar.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="/xgs">Home</a>
            <li><a href="/xgs/devices">Devices</a>
            <li><a href="/xgs/search">Search</a>
            <li><a href="/xgs/associate">Associate</a>
        </ul>
    </nav>
    <div class="box">
        <form method='POST'>
            <p class="card-text">Associate Device</p>
            <input type="text" id="mac" name="mac" value=MAC>
            <button type="submit" formaction="/xgs/associate/insertRG">Add</button>
            {{result}}
            <hr>
        </form>
    </div>
</body>
</html>>
{% endblock %}
{% block scripts %}
{% endblock %}

Solution 1:^[1]

I've found my issue. First by putting the contents of my css into the head of associate.html the CSS was retained. So it had to do with the link to my css file. Here is what the line of code I had and what I replaced with.

old:

<link rel="stylesheet" type="text/css" href="../static/css/sidebar.css">

new:

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

I found this in this thread thanks to codegeek

Solution 2:^[2]

I'm not familiar with Flask or Python, but from a general web point of view, when you submit a form, the browser expects the response to be an HTML page, and it displays that page instead. So, what does "/xgs/associate/insertRG" respond with when you post to it? Does it return an HTML page which contains a link to your style sheet?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Josh Cingel
Solution 2	Brett Donald

'CSS Style Disappears on Form Button Click

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]