Formularfelder nebeneinander anordnen, mit Labels darüber

[Frauke]

Ich habe schon im Forum über das Problem mit dem Formularfelder nebeneinander setzen gelesen, aber noch nicht so eine richtige

Antwort gefunden. Deshalb mein Anliegen:

Die Felder sind jetzt alle übereinander, ich möchte nun daraus 2x2 machen und dabei die Label über den Eingabefeldern behalten. Doch

irgendwie kommen die Label und Textfelder immer in einen Konflikt und verschieben sich ganz eigenartig, wenn ich mit float eingreifen

will. Ich komme echt nicht mehr weiter. Es ist ein total einfaches Formular. Was mache ich falsch?

Ich nutze übrigens ein tabellenfreies Layout und habe den Stand meines Formulares und meinen dazugehörigen CSS Teil angehangen.

Danke,
Frauke

[Sebastian]

HI

was spricht denn gegen

input,label {
 float: left;
 display: block;
}
label {
 width: /* Feste Breite */
}

Sebastian

[Frauke]

Hallo Sebastian,

vielen Dank, aber leider setzt das alle Label links und die Eingabefelder (schön sauber) rechts daneben. Habe etwas rumgespielt, aber immer noch keine Lösung gefunden. Also die Label sollen jeweils über dem Eingabefeld stehen (siehe Abb. erster Beitrag) und diese Blocks nebeneinander mit 2x2.

Gibt es noch andere Möglichkeiten?

[Nina]

Ein Tipp: Stell dein Beispiel irgendwo online. Es ist viel anstrengender, sich durch Code auf einem Bild durchzulesen, als wenn man an einem Live-Objekt z. B. via Firebug ne Idee ausprobiert und dann hier postet.

[mandrake]

Hallo Frauke,

Du solltest die Formularfelder für die rechte Spalte und für die linke Spalte jeweils in einem separaten <div> kapseln und diese entsprechend per CSS positionieren (floaten). Binde die zusätzlichen <div>-Elemente einfach mittels des Feldtyps "HTML" an den richtigen Stellen im Formulargenerator ein – dies sollte Dich zum Erfolg führen.

MfG
Peter

[Frauke]

@ Nina: ist bisher nur auf nem lokalen Server, sonst gerne

@ Peter: Danke, ich versuch's morgen gleich mal. Klingt auf jeden Fall nützlich.

[Frauke]

Also die Variante von Peter hat super funktioniert. Ich habe also einfach den Code der Textfelder per Hand in HTML eingegeben und zwei div's erstellt. jetzt sitzt alles dort, wo es sitzen soll. Danke Peter!

[mandrake]

Hallo Frauke,

es besteht keine Notwendigkeit und auch kein Sinn darin, die eigtl. Formularfelder per Hand in einen Feldtyp "HTML" zu übertragen. Damit verlierst Du die Bindung der Felder an den Formulargenerator, was früher oder später zu ernsten Problemen führen dürfte. Wenn Du möchtest, dass Dein Formular korrekt funktioniert, solltest Du diese Änderung rückgängig machen. Arbeite bitte prinzipiell immer mit den im Formulargenerator zur Verfügung stehenden Feldtypen. Im konkreten Anwendungsfall geht es lediglich darum, die <div>-Elemente zur Positionierung mit dem Feldtyp "HTML" zusätzlich(!) zu den bereits bestehenden Formularfeldern in den Formulargenerator einzubinden.

MfG
Peter

[vega]

Auf die Idee von Peter bin ich selber auch schon gekommen.
Es gibt nur ein "kleines" Problem bei der Methode - der tabindex.

Die meisten Nutzer verwenden die TAB-Taste um zwischen den Formularfeldern zu wechseln.

Bsp.:

|Vorname|(1) |Nachname|(2)
|Adresse|(3)

Wenn die Felder "Vorname" u. "Adresse" mittels div links u. das Feld "Nachname" rechts gefloated sind, springt man mit der TAB-Taste vom Feld "Vorname" erst zum Feld "Adresse" u. dann zu "Nachname".

Man hat also folgende ungewünschte Reihenfolge: (1) -> (3) -> (2)


Habt Ihr da Ideen?

[zengo]

Hallo

Ich versuche auch vergeblich dass die Formularfelder nebeneinanderstehen und dass das "label" über den Feldern ("input") steht. Aber ich komm da nicht weiter. Wie ist diese Methode mit den <div> gemeint. Wo genau muss ich welchen html code eingeben? Hoffe es kann mir jemand helfen.

[xchs]

Hinsichtlich Tab-Index bzw. falls jemand auch nach diesem Feature sucht, hier das betreffende Ticket von vega.

Ich versuche auch vergeblich dass die Formularfelder nebeneinanderstehen und dass das "label" über den Feldern ("input") steht. Aber ich komm da nicht weiter. Wie ist diese Methode mit den <div> gemeint. Wo genau muss ich welchen html code eingeben? Hoffe es kann mir jemand helfen.

Du müsstest Dir im Formulargenerator VOR den betreffenden Feldern ein neues Element vom Feldtyp "HTML" anlegen und dort ein öffnendes Div-Tag eintragen; diesem Tag weist Du dann auch gleich die passende Klasse zur Formatierung mittels CSS zu, z.B. "<div class="c50l">". Idem dann für den schließenden Div-Tag ("</div>"), dessen Element im Formulargenerator dann entsprechend NACH den betreffenden Formularfeldern angelegt wird.

Ein Beispiel, wie man das umsetzen könnte, findest Du z.B. hier.

[karo]

ist ein schon etwas älteres thema aber ich hol es nochmal hervor aus aktuellem Anlass.
Eine Andere Möglichkeit müsste es doch sein das entsprechende Template anzupassen: darin ein div ums label+EIngabefeld machen mit der css klasse vom feld
hab schon versucht das Template zu finden, jedoch finde ich es nicht.
Es gibt diverse form_xx templates - darunter aber nichts was zu einer textfeldeingabe passen würde.
Könntet ihr mir da einen tipp geben?
danke
lg
karo

[JanoschSkuplik]

Es gibt diverse form_xx templates - darunter aber nichts was zu einer textfeldeingabe passen würde.
Könntet ihr mir da einen tipp geben?

form_widget

[karo]

hey Janosch!

Stimmt, es funtktioniert in der form_widget
ist zwar nicht speziell für Textfeld (funkt. auch zb. für Textarea)
mh. leider ist da wenig Code drin und er holt sichs von wo anders - deshalb weiß i a nit wie i die klasse vom input rausbekomm (die ich ja eingeben kann im formulargenerator)

weiters werden in der form_widget auch nicht die <br> erstellt die nach jedem label/input ausgegeben werden. Würde die gerne rausnehmen.

<?php if (!$this->tableless): ?>
  <tr class="<?php echo $this->rowClass; ?>">
    <td class="col_0 col_first"><?php echo $this->generateLabel(); ?></td>
    <td class="col_1 col_last"><?php echo $this->generateWithError(); ?></td>
  </tr>
<?php else: ?>
<div class="testtest">
  <?php echo $this->generateLabel(); ?> 
  <?php echo $this->generateWithError(); ?><br>
</div>
<?php endif; ?>

Lg karo

[jk1]

Guck mal rechts neben dem generateWithError. Dort ist auch das <br>

Ich mach das meißt so:

<?php if (!$this->tableless): ?>
  <tr class="<?php echo $this->rowClass; ?>">
    <td class="col_0 col_first"><?php echo $this->generateLabel(); ?></td>
    <td class="col_1 col_last"><?php echo $this->generateWithError(); ?></td>
  </tr>
<?php else: ?>
<div class="wrapper_<?php echo $this->id; ?>">
  <?php echo $this->generateLabel(); ?> 
  <?php echo $this->generateWithError(); ?>
</div>
<?php endif; ?>

Dann hast du für jedes DIV eine entsprechende Klasse.

Schau dir am besten auch mal das hier an: http://www.medamind.de/webdevelopmen...vidualisieren/
Auch ganz nützlich

[karo]

oh cool vielen dank!!! auch der link ist hilfreich!

jedoch gibt die ->ID die ID und nicht die klasse aus
dh. ich habe dann wrapper_1, wrapper_2, wrapper_3 etwas unschön damit zu arbeiten
-> class hab ich schon probiert und geht so leider nicht
weißt du das vielleicht noch ? (wie man die klasse bekommt?)

thx

[jk1]

Das ist dann strClass.

Also in dem Fall:

<div class="<?php echo $this->strClass; ?>">

Oder auch wieder mit einem beliebigen Text davor, falls das div nicht die gleiche Klasse wie das label & das input haben soll.
z.B.

<div class="div_<?php echo $this->strClass; ?>">

[karo]

Hey again!

Danke für deine Antwort!
Habs versucht, leider funktionierts nicht.
Übrig bleibt die Klasse "div_" ohne der Klasse dahinter
noch eine Idee?

Lg
Karo

[jk1]

Was ist das denn für ein Formular?
Über den Formulargenerator erzeugt? Auch dem Feld eine CSS Klasse vergeben? Habs damit grad getestet & bekomme die CSS Klasse ausgegeben, die ich dem Feld im Backend bei dem Formulargenerator eingetragen habe.

[karo]

ahjjjjjj zu doof
tut mir leid, du hast recht, es funktioniert!
hatte nur zu viel herumgetan und dann vergessen die klasse wieder reinzugeben
auf jeden fall DANKESCHÖN!!!
schönen abend

[mike_mcfly]

Also um Formulare mehrspaltig nebeneinander anzuordnen kannst Du auch die Erweiterung subcolumns verwenden.
Dann bleibt nur noch das "Problem" mit den Labels

[robinhutter]

Hallo zusammen,

der Thread ist ja schon mäßig alt und bevor ich mir jetzt die Finger wund tippe, kurz die Frage: Gbit es inzwischen eine andere Möglickeit (Template, Add-In o.ä.), die es erlaubt, die Felder nebeneinander anzuordnen? Ich habe bisher nämlich nichts gefunden und die Threads, die ich gefunden habe, behandeln entweder nicht mein Problem oder sind böhmische Dörfer für mich.

Wenn es nichts neues gibt: Ich habe das mit dem zusätzlichen HTML nicht wirklich verstanden. Ich habe es versucht (zugegebenermaßen mit TABLE anstatt DIV, weil ich kein Tabellenlos-ist-besser-Gläubiger bin), aber das hat nicht wirklich funktioniert. Die Felder stehen trotzdem untereinander.

Hier ist, was ich gemacht habe:

Elementtyp: Formular - Kontaktformular, tabellenloses Layout: nein
Quellelement ID1:
HTML-Code: "<table><tr><td>"
Textfeld 1
HTML-Code: "</td><td>"
Textfeld 2
HTML-Code: "</td></tr></table>


Bitte beachtet: Ich bin kein IT-Profi und Contao-Anfänger, also bitte ich um etwas Nachsicht.

Vielen Dank im Voraus
robinhutter <><

[Andreas]

Ich habe es versucht (zugegebenermaßen mit TABLE anstatt DIV, weil ich kein Tabellenlos-ist-besser-Gläubiger bin), aber das hat nicht wirklich funktioniert. Die Felder stehen trotzdem untereinander.

"Tabellenlos-ist-besser-Gläubiger" sollte es eigentlich nicht geben, denn es ist keine Frage von besser oder schlechter, sondern die Frage, ob mit einer Tabelle tabellarische Daten präsentiert werden - wenn ja, dann ist eine Tabelle genau das richtige. Ob in einem Formular die LABELs und INPUTs nun tabellarisch sind oder nicht, darüber könnte man streiten - ich finde sie sind es nicht.

Die Beispiele hier sind was älter und da sich an dem HTML-Markup von Formularen die letzten Jahre ganz schön was verändert hat, mag das ein oder andere hier nicht mehr funktionieren.

Wenn du "tabellenloses Layout" nicht aktiviert hast, dann müssten die Labels bereits links von den Inputs stehen. Zeige bitte mal einen Link auf das Problem. Die IMHO bessere Lösung wäre tabellenlos und dann mit CSS formatiert. Das erfordert natürlich CSS-Kenntnisse. Wenn du diese nicht hast, kannst du eigentlich nur fertige Themes benutzen. Wie man eine CSS-Datei erstellt und diese ins Layout einbindet, dabei können wir natürlich erstmal helfen, falls du das möchtest. Am besten ist es dabei, wenn du die CSS-Dateien nicht mit dem Backend-Stylesheet-Modul erstellst, da du von uns bereits fertigen Code gezeigt bekommst, welchen du in deine CSS-Datei einfügen kannst.

[robinhutter]

Fast vergessen. Vielen Dank für die Antwort. Ich hab mir einstweilen mal beholfen. CSS ist für mich immer noch ein schwieriges Thema. Aber ich habe inzwischen eine Lösung gefunden, mit der ich einigermaßen das bekomme, was ich will.

[miniA4kuser]

Dann wäre es auch schön, wenn du deine Lösung für die Nachwelt offenbarst.

[mandrael]

Hallo,
ich würde auch gerne Formularfelder nebeneinander anordnen (Vorname + Nachname, PLZ + Ort etc.).
Wenn man ein Formularfeld mit einer Klasse belegt und float: left; width: 50% einstellt, wird es links positioniert, aber wie geht das mit dem rechten Feld?
Vermutlich lässt sich das mit Bordmitteln von Contao lösen, oder?
(Contao-Version 4.11)

LG Michael

[mlweb]

Anordnung von Formularfeldern ist eigentlich immer CSS.
Heutzutage würde ich das mit Flexbox oder CSS-Grid lösen. Float eigentlich nur, wenn ich ältere Browser unterstützen muss.

Wenn man ein Formularfeld mit einer Klasse belegt und float: left; width: 50% einstellt, wird es links positioniert, aber wie geht das mit dem rechten Feld?

Na genauso.

[mandrael]

Hi,
danke für die Antwort, ich habe flexbox probiert, aber es hat nicht wie gewünscht funktioniert.
Schließlich habe ich das ganze klassischer umgesetzt. Da ich im Forum nichts gefunden habe, was ich direkt verwenden konnte, poste ich hier den Code, der mit rocksolid/tao funktioniert. Die Formulare werden in der main.css auf 75% Breite skaliert (desktop):

/* ab #4158 in main.css */
.main-content input,
.main-content textarea,
.main-content select,
.main-content fieldset {
	width: 75%;
}

CSS-Code für zwei Formularfelder nebeneinander:

/* Formularfelder zweispaltig mit float */

div.float1, div.float2 {
   float: left;
   clear: none;
}

@media screen and (max-width: 599px) {
div.float1, div.float2 {width: 50%}
}
@media screen and (min-width: 599px) {
div.float1, div.float2 {width: 37.50%}
}

input.float1, input.float2 {
   width: 100%
}

div.float1 {
   padding-right: 10px;
}

div.float2 {
   padding-left: 10px;
}

Formularfelder links und rechts werden mit der Klasse float1 und float2 belegt.
In meinem Fall Vorname & Nachname bzw. PLZ & Ort.

LG Michael

Screenshot:
formular_float_tao.png

[Andreas]

Hier mal ein Beispiel mit Grid:
Bildschirmfoto am 2021-07-21 um 18.31.45.png

.formbody {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   1rem 2rem;
}
.widget-textarea {
  grid-column: 1 / -1;
}
label {
  display: block;
}
input,
textarea {
  width:      100%;
  box-sizing: border-box;
} 

Ist auch responsive, 1-spaltig wenn kleiner als 240px.
Siehe auch hier https://www.youtube.com/watch?v=qjJR3qYCd54
Im Firefox kann man sich Hilfslinien für Grid (und auch Flex) anzeigen lassen, einfach auf Grid klicken, oder in den Reiter "Layout" gehen.