Liste der Anhänge anzeigen (Anzahl: 2)
Formularfelder nebeneinander anordnen, mit Labels darüber
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
Gibt es neue Möglichkeiten?
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 <><
Liste der Anhänge anzeigen (Anzahl: 1)
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):
Code:
/* 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:
Code:
/* 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:
Anhang 24662
Liste der Anhänge anzeigen (Anzahl: 1)
Hier mal ein Beispiel mit Grid:
Anhang 24775
PHP-Code:
.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.