Python – Jinja2 template – CSS does not work

Jinja2 template – CSS does not work… here is a solution to the problem.

Jinja2 template – CSS does not work

I have a Python element with the following file structure

 days_on_hand.py
 templates\
    doh_managers.html
 static\
    style.css

Here is my html template code:

<! DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel= "stylesheet" type= "text/css" href= "/static/style.css">
    <title>{{ title }}</title>
</head>
<body>
    <h2>Days Inventory on Hand -- Warehouse</h2>
     {{ managers_days }}
</body>
</html>

I have also used the href below

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

I don’t see any CSS format in the output, it’s generated using the following:

template_vars = {"title": "Days Inventory on Hand -- Warehouse",
                             "managers_days": df.to_html(index=False)}
html_out = template.render(template_vars)
html_file.write(html_out)

I see that there is a double border on the table, my css is as follows, the border should be collapsed, and the H2 text is not centered. :

h2{
    text-align: center;
}

table {
    border-collapse: collapse;
}

Solution

If your style.css file is in the static folder of the element, make the resource available by Flask. WSGI, you must use >url_for(‘static’, filename=’style.css’). In the href of the style sheet.

Related Problems and Solutions