Search code examples
pythonhtmlcssflaskflask-appbuilder

With Flask-Appbuilders ModelView how do I change width of colums and tables?

I'm currently starting to work on an existing flask-appbuilder based application and to improve look and feel I'm trying to solve some inconveniences:

  • relative size of content inside table is always same regardless of page zoom level. i.e despite I'm viewing the page on a 40" 4k monitor I can't see all columns.
  • columns have automatically set (minimal) relative sizes, so it's up to the framework to decide what I can see
  • the vertical scroll bar is on the bottom of the table and I have relatively large fields vertically. So to scroll vertically I have to scroll up and down regularly.

enter image description here

So currently I'm looking for a way to set the (relative) size of the content of the table to either a manual value or to "always fit whole table", but searching the documentation for size and width didn't give me a hint yet. Alternatively it would help a little bit to be able to collapse columns or to have an extra scroll bar on the top edge of the table.

Is there a way to solve this without having to implement some sort of table templates?

Solution

  • You just have to add your template when creating the AppBuilder object:

    appbuilder = AppBuilder(base_template="layout.html")

    In the template folder you can then create a custom layout file (p.e. layout.html) like this:

    {% extends 'appbuilder/baselayout.html' %}
{% block head_css %}
    {{ super() }}
    <link rel="stylesheet" href="{{url_for('static',filename='css/styling.css')}}"></link>
{% endblock %}

    You can then use custom stylesheets in the template/css folder (p.e. styling.css). To increase the size of all ModelViews just add:

    .container{
    width: 80%;
}

    Source: https://flask-appbuilder.readthedocs.io/en/latest/templates.html#css-and-javascript