Flask WTF Breite der Felder

Django, Flask, Bottle, WSGI, CGI…
Antworten
zegru
User
Beiträge: 49
Registriert: Freitag 9. Oktober 2020, 09:22

Hallo!

Ich verwende Flask mit WTForms und Bootstrap. Im HTML Template verwende ich

Code: Alles auswählen

{{ wtf.quick_form(form) }}
, um ein Formular darzustellen. Das Formular besteht nur aus genau 3 Feldern (jeweils SelectField), könnte also auch manuell erzeugt werden.
Das Problem ist nun, dass sie jeweils so breit wie das Fenster sind. Anstatt dessen, dass sie alle in einer einzigen Zeile dargestellt werden (wenig Text genug würden sie enthalten), landet also stattdessen jedes in einer einzelnen Zeile, wodurch sie außerdem als Bonus auch noch sehr unübersichtlich werden.
Kann man die dargestellte Feldbreite auf den nötigen Wert verringern?
__deets__
User
Beiträge: 14494
Registriert: Mittwoch 14. Oktober 2015, 14:29

Sowas ist die Aufgabe von CSS.
zegru
User
Beiträge: 49
Registriert: Freitag 9. Oktober 2020, 09:22

Ich habe es nun zwar mit Hilfe von CSS geschafft, die einzelnen Felder genauso breit darzustellen wie nötig, aber immer noch landen die 3 Felder in 3 Zeilen. Obwohl sie in einer einzigen Zeile Platz hätten. Kann man sie neben- statt untereinander darstellen?
__deets__
User
Beiträge: 14494
Registriert: Mittwoch 14. Oktober 2015, 14:29

Bestimmt. Aber ich kann kein CSS, und ich war dazu immer zu doof. Aber es gibt (fast) nichts, was damit nicht geht. Es ist gemacht fuer solche Aufgaben.
Benutzeravatar
__blackjack__
User
Beiträge: 13004
Registriert: Samstag 2. Juni 2018, 10:21
Wohnort: 127.0.0.1
Kontaktdaten:

Ich denke das Problem ist einfach das es sich hier zu einfach gemacht wird mit `quick_form()`. Es wird ja Bootstrap verwendet und damit kann man auch Formulare gestalten wo die Elemente in einer Zeile landen („inline forms“). Da muss man kein CSS selber schreiben können.
“Most people find the concept of programming obvious, but the doing impossible.” — Alan J. Perlis
einfachTobi
User
Beiträge: 491
Registriert: Mittwoch 13. November 2019, 08:38

Letztlich musst du deinem Form-Element eine entsprechende Bootstrap-Class verpassen. Du kannst entweder FlaskWTF nutzen, um die Formularfelder darzustellen oder dies "händisch" machen. Allerdings nicht alles einmal mit quick_form. Zum Einstellen der Breite kannst du in Bootstrap über das Grid mit Zeilen und Spalten gehen (<div class="row"><div class="col-2">...), über die Elementbreite (<button class="btn btn-primary w-25">...) oder über das Flex-System. Wie sieht denn jetzt dein Drumherum aus?
Beispiele

Code: Alles auswählen

# Variante 1
{{ wtf.form_field(form.formularfeld, class="w-25") }}
# Variante 2
{{ form.formularfeld.label(class_="form-label") }}
{{ form.formularfeld(class_="form-control w-25") }}
zegru
User
Beiträge: 49
Registriert: Freitag 9. Oktober 2020, 09:22

„inline forms“ war der zielführende Suchbegriff für Google. Wenn man nämlich im Template den Parameter 'extra_classes='form-inline'' beim Aufruf von quick_form hinzufügt, klappt es.
Antworten