0

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 %}
Jash
  • 23
  • 6
  • I should add, I'm using a form and the formaction on the button because I had more functions on this page but removed them in order to test without worrying about them. For example I had another button to associate a customer to a device with the customer and the mac as inputs, using formaction on that. – Jash May 12 '22 at 19:12
  • Good on you for creating a snippet, but the snippet does not appear to behave the same as your application, when I compare my results with your screenshots. A link to your application may be helpful for us to help you. – Brett Donald May 13 '22 at 02:47

2 Answers2

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

Jash
  • 23
  • 6
0

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?

Brett Donald
  • 6,745
  • 4
  • 23
  • 51
  • The flask app has 2 routes for the associate side bar menu choice. The first route is the main splash page which doesn't call any functions, the second is for when you press Add. Both of which return the associate.html . You can see them in the flask app under @app.route('/xgs/associate/insertRG', methods=['POST']) but I believe the answer to this is implementing some javascript. – Jash May 13 '22 at 12:04