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

Issue

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.

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

Answered By - loocars