Flask css in layout not loading

Question

I tried to integrate this(having a layout.html and index.html) into my app. Before starting I only had index.html with all of my css/javascript includes at the top.

Current file struct

/app
    - app_runner.py
    /templates
        - layout.html
        - index.html
    /static
        /styles
            - mystyle.css

Layout.html (mostly css and javascript CDN and my stylesheet)

<!doctype html>
<!-- Latest bootstrap compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jquery -->
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<!-- Latest bootstrap compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jstree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<!-- my stylesheet -->
<link rel='stylesheet' type='text/css' href="{{url_for('static',filename='styles/mystyle.css')}}" />
<script type="text/javascript">
  var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
{% block body %}{% endblock %}

The page, for the most part, renders the same: The jstree appears, bootstrap works, and the rest of my styling is applied. In my css file I have a line that doesn't get applied:

td {
    padding: 5px;
}

The developer console shows padding:0, which comes from a bootstrap script. If I change it in the developer console I can get it to change to 5px.

I've heard using !important is bad practice but I tried it anyway with no change. I tried adding a class to all my td so it'd have higher precedent (based on this answer) and have that style (.my_row{padding:5px;}) apply but again it doesn't change. So it seems my css isn't being applied to my table. Other parts of mystyle.css work though.

Any thoughts on why the padding isn't being applied to my table?

It looks as though the selector for the style specified within `normalize.less` is *more specific* and therefore takes precedence. Consider changing yours to `td th { padding: 5px; }` instead to be "equally specific". Here's a [page that can explain that a bit](http://vanseodesign.com/css/css-specificity-inheritance-cascaade/) — Suever, Jan 27 '17 at 23:06

score 1 · Accepted Answer · answered Jan 28 '17 at 01:46

So it turns out my stylesheet wasn't refreshing in the cache. I found an answer on this site.

I added these lines of code to my python (app-runner.py)

@app.context_processor
def override_url_for():
    return dict(url_for=dated_url_for)

def dated_url_for(endpoint, **values):
    if endpoint == 'static':
        filename = values.get('filename', None)
        if filename:
            file_path = os.path.join(app.root_path,
                                     endpoint, filename)
            values['q'] = int(os.stat(file_path).st_mtime)
    return url_for(endpoint, **values)

Flask css in layout not loading

1 Answers1