Seite 1 von 1
Flask WTF Breite der Felder
Verfasst: Sonntag 7. März 2021, 12:47
von zegru
Hallo!
Ich verwende Flask mit WTForms und Bootstrap. Im HTML Template verwende ich
, 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?
Re: Flask WTF Breite der Felder
Verfasst: Sonntag 7. März 2021, 13:35
von __deets__
Sowas ist die Aufgabe von CSS.
Re: Flask WTF Breite der Felder
Verfasst: Sonntag 7. März 2021, 15:47
von zegru
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?
Re: Flask WTF Breite der Felder
Verfasst: Sonntag 7. März 2021, 15:51
von __deets__
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.
Re: Flask WTF Breite der Felder
Verfasst: Sonntag 7. März 2021, 15:58
von __blackjack__
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.
Re: Flask WTF Breite der Felder
Verfasst: Dienstag 9. März 2021, 10:15
von einfachTobi
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") }}
Re: Flask WTF Breite der Felder
Verfasst: Samstag 13. März 2021, 14:07
von zegru
„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.