CSS Style Disappears on Form Button Click-CodePudding

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 >
        <form method='POST'>
            <p >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 %}

CodePudding user response：

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?

CodePudding user response：

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