Spaltenbreiten Formular

Liebe Community

Ich möchte in meinem einfachen Anmeldeformular die Spaltenbreiten für schmale Bildschirme)
EINZELN bestimmen oder statt zwei nur eine einzige Spalte zeigen (d.h. Label und Textfeld jeweils
übereinander statt nebeneinander anordnen).

Ohne Erfolg versucht versucht habe ich:

.kontaktformular { /*übereinander statt nebeneinander*/
column-count: 1;
}

oder:

.kontaktformular label {
width:100px; /*so schmal, dass das Textfeld rechts daneben genug Platz hat*/
}

oder

.kontaktformular label {
width: 30%; /*so schmal, dass das Textfeld rechts daneben genug Platz hat*/
}


Kurz: Ich kann weder die Anzahl der Spalten noch deren Breite einzeln beeinflussen.

Folgendes funktioniert, setzt aber beide Spalten auf die gleiche Breite.
Und das will ich gerade nicht, weil dann das Textfeld zu wenig Platz erhält .

.kontaktformular { /*übereinander statt nebeneinander*/
column-width: ... px;
}

.kontaktformular {
width: xxx px;
}
funkioniert natürlich, aber dann erhalten beide Spalten die gleiche Breite.


Ich nehme an und hoffe, dass schon andere User dieses Problem kennen
und gelöst haben und danke im Voraus für jede Hilfe.

Verwende doch bitte die Code Tags wenn du Code postest :-)

Ganz grundsätzlich kann man das super mit Flexbox lösen.
Neben den schon angesprochenen Code-Tags solltest Du bei solchen Fragen auch immer ein Link zum Problem posten.

Im Moment widersprichst du dich für mein Verständnis ... du möchtest <label> und Textfeld untereinander, setzt aber eine bestimmte Breite für <label> die geringer als 100% ist und erwirkst damit wohl (un)beabsichtigt eine 2-Spalten-Darstellung.

Wenn du einen link für uns hättest, könnten wir auch erkennen, mit welchem "grid" du arbeitest.

Ich bin lange in der Infomatikbranche tätig gewesen,
habe aber den Begriff Code-Tag nie angetroffen.
Wenn mir den jemand erklärt, poste ich ihn gerne.

Inzwischen kann ich die Felder "label" und "input"
[statt wir von mir zuvor angenommen "textarea" oder "textfield"]
gestalten. Es ist mir aber nicht gelungen, die Spalte "label"
schmaler zu machen als die Spalte "input".

Auch die Alternativlösung "EINE EINZIGE Spalte", d.h. label und input
untereinander, habe ich noch nicht hingekriegt.

Gruss und Dank koanick

Ein ganz klein wenig Information wäre sicher hilfreich. Weil so versagt sogar meine Glaskugel den Dienst. Also z.B. wie sieht das Formular im HTML aus? Ist ja zwischen verschiedenen Contao-Versionen eventuell unterschiedlich. Teilweise gibt es tabellenbasierte Formulare, aber auch solche ohne Tabellen. Ein Link wäre auch sehr hilfreich.

Ein Code-Tag erzeugst du, indem du oberhalb des Eingabefeld hier im Forum auf das Symbol "#" klickst. Damit wird bei Eingabe von Code z-B. eine vernünftige Einrückung möglich und überhaupt wird der Code übersichtlicher dargestellt. Warum es Code-Tag heißt, siehst du dann sofort.

Zitat:

---

Zitat von koanick

Ich bin lange in der Infomatikbranche tätig gewesen,
habe aber den Begriff Code-Tag nie angetroffen.
Wenn mir den jemand erklärt, poste ich ihn gerne.

---

Schaue Dir mal die Icons im Editor oben an, wenn Du Deinen Beitrag bearbeitest. Da ist in Zeile 2 von rechts nach links: PHP-Code einfügen, HTML-Code einfügen, Code einfügen, ...
Nimm "Code einfügen" - das ist das Raute-Icon.

Liebe Helfende

Ich konnte das Problem lösen, indem ich das CSS der EINZELNEN
Formularelemente anpasste. Nun reduziert Contao die Anzahl Spalten
automatisch auf 1, wenn der Platz nicht mehr ausreicht.

Ich bitte um Entschuldigung für den euch bereiteten Ärger.

koanick