[GELÖST] Wie oder wo kann man Feldlänge bei Form Builder bestimmen

[ottyscom]

Hallo

Bin schon wieder am verzweifeln. Ein ganzer Nachmittag nur am suchen wie oder wo man ein Eingabefeld des Moduls Form Builder kürzer oder länger machen kann. Kommda einfach absolut nicht vorwärts mir sind die Dinger zu kurz ich will sie länger haben. Aber wie?

Im Formular ist ein Eintrag mit CSS und dort ist im Code folgendes gespeichert:


.contactform fieldset {padding: 1em; background-color: #eee;} .contactform fieldset legend {font-weight: bold;} .contactform div {width: 100%; padding: 0.25em 0 0.25em 0;} .contactform div label {display: block; width: 10em; } .contactform div.required  .cancion {display: block; width: 300em; }

So schön und gut aber wo bitte oder wie kann ich da die Breite eines Feldes bestimmen? Habe in diesem Code schon mit den Nummern rumgespielt. Aber leider ohne sichtlichen Veränderungen am Formular

Ich brauche dringend Euere Hilfe

Ottyscom

[NaN]

Kann man das nicht im Formbuilder direkt für jedes Feld einzeln angeben?
Ich glaube die Länge der Felder wird kann nicht via CSS definiert werden. Das muss direkt ins Markup.
Z.B.:

[ottyscom]

Ja aber das Problem ist es ist nirgendwo eine Möglichkeit dort diese Formlänge (size) einzustellen. Leider

[NaN]

Ich weiß jetzt nicht genau wie der FormBuilder arbeitet, aber kann man den Formularen eventuell ein Template zuweisen?

[dietzi]

Macht es doch nicht so kompliziert 

In "Erweiterte Einstellungen / CSS-Klasse für dieses Feld" eine beliebige Klasse angeben (mit Bezug zum Formular) und diese in einem eingebundenem Stylesheet definieren (width: 150px).

Dietmar

[ottyscom]

Mmmh könntest du das ganze etwas genauer erklären? Ich hab genau da nämlich schon rumgefumelt aber bin da nich weitergekommen. Gib ein Beispiel an Schritt für Schritt.

Danke

Ottyscom

[yogi62]

Moin,

ich schlage mich auch schon länger damit rum.

Meine Lösung war bisher:
In meinem Formbuilder-Formular gibt es ein Feld "css" mit folgendem Inhalt:


.contactform fieldset {padding: 2em; background-color: #e7e7cc ; -moz-border-radius:20px; -khtml-border-radius:20px; }
.contactform fieldset legend {font-weight: bold;}
.contactform div {width: 100%; padding: 0.25em 0 0.25em 0;}
.contactform div label {display: block; width: 40em; }
.contactform div.required {color: #f00;}
.contactform input {width: 50%; }


Mit .contactform input kann man die Breite steuern, allerdings verbreitert sich auch der Sende-Button - nicht unbedingt das, was ich mir vorstelle.

Von daher wäre ich ebenfalls an einem Beispiel (siehe Dietmar) interessiert.

Gruss, Jörg

[dietzi]

Ich weise grundsätzlich jedem Formular auch eine eigene Klasse zu, auf der Hauptseite unter "CSS-Klasse für dieses Formular".

Den einzelnen feldern gebe ich ebenfalls eine Klasse, eben in "Erweiterte Einstellungen" unter "CSS-Klasse für dieses Feld". Aber eher generelle Klassen, wie: textfeld-lang, textfeld-kurz, textbereich, kontroll, option, usw. je nach Feldtyp.

In Stylesheet schaut das dann z.B. so aus:

Code: Select all

.kontaktformular .textfeld-lang input {
...Dein CSS... }

Um das Layout für den Absendebutton zu ändern, gibst Du die Klasse oder ID des Buttons zusätzlich an (Schau in den Quelltext), läßt aber die "Feldklasse" weg, weil die hast Du ja dem Absendebutton nicht zugewiesen.

Code: Select all

.kontaktformular input.fbsubmit {
...Dein CSS... }

PS: Füge in "Layout / Stylesheets" ein neues Stylesheet hinzu, nenne es meinetwegen "Eigene", fülle es mit Deinen eigenen Klassen und verbinde es dann mit den verwendeten Templates.

Soweit alles klar?

[ottyscom]

Ja Vielen Dank! Es klappt wunderbar. Nur noch eine Frage

Kann man auch Fmehrere Felder nebeneinander setzen?

[LeisureLarry]

Alle optischen Änderungen am Aussehen von Formularen sollte man per CSS machen. Um mehrere Felder nebeneinander anzuzeigen, müsstest Du Dich mal mit dem Attribut float oder display: inline beschäftigen. Diese müsstest Du beim FormBuilder vermutlich auf den div-Container anwenden, der die jeweilige Zeile umgibt.

[ottyscom]

Alles klar. Besten Dank für Euere Hilfe!