flask-admin - how to change input field size with flask-admin

Question

After studying long hours both the documentation and the source codes of flask-admin and wtforms, I still could not understand how to vary the size of input fields in flask-admin model forms.​

According to wtf "crash course" page, it should be possible to pass to the form fields css parameters in the templates, like this (jinja2 example):

<form method="POST" action="/login">
    <div>{{ form.username.label }}: {{ form.username(size="10") }}</div>
    <div>{{ form.password.label }}: {{ form.password() }}</div>
</form>

however, with Flask-Admin form fields / templates this does not seem possible. At least I have not found a decent way to do this

Any advice would be appreciated

Answer 1

An option is to use form_widget_args, a dictionary with attributes for the model form fields, in the model view.

For instance, to have 20 rows for a textarea for the 'description' field of a 'MyItem' model:

class MyItemView(ModelView):
    form_widget_args = {
        'description': {
            'rows': 20
        }
    }

See http://flask-admin.readthedocs.org/en/latest/api/mod_model/

It is also possible to replace input fields entirely, by specifying form_overrides. E.g., to replace the textarea with a single-line input field:

class MyItemView(ModelView):
    form_overrides = {
        'description': StringField,
    }

See http://flask-admin.readthedocs.org/en/latest/advanced/ , http://wtforms.readthedocs.org/en/latest/fields.html

Answer 2

If you're extending the ModelView class from flask.ext.admin.contrib.sqla, you can override the value of the template used. You can override either the list view of the model, the create view or the edit view, like so:

class CustomAdminView(ModelView):
    list_template = "list_template.html"
    edit_template = "edit_template.html"
    create_template = "create_template.html"
    ...

You'll need to create each of these templates yourself, and you can extend the default admin template to keep it consistent with all of the bespoke admin views. So, an example template would be:

<style type="text/css">
    .select2-container, .select2-container-active, #title, #author, #description {
        width: 75% !important;
    }
    .controls div input {
        height: 40px;
    }
    .select2-search-choice {
        width: 90%;
    }
    #visible {
        float: left;
        text-align: left;
    }
</style>
{% extends 'admin/model/edit.html' %}

Notice the last line: {% extends 'admin/model/edit.html' %}, which extends the default edit view from Flask Admin. You can change edit for list or create to extend those views instead.

Hope that clears things up.