Visforms Mitteilungsfeld zeigt nur 1 Zeile

Hallo Visforms vi-solutions Team,
Die Komponente visforms ist super - genau das, was ich für ein schnell zu bedienendes Formular auf allen Geräten / Devices (responsive) benötige. Danke für die klasse Arbeit.

Ein kleines Problem habe ich: Das Mitteilungsfeld habe ich auf 4 Rows eingestellt. Das Feld zeigt trotzdem immer nur 1 Zeile und wenn man etwas eingibt, dann ist es nicht lesbar bzw. geht endlos nach rechts ohne Umbruch. Den Editor, den ich verwende (jcksuite_6.5. möchte ich nicht einbinden, da sonst hier zu viel grafisch "veranstaltet" wird. Im PC läßt sich das Mitteilungsfeld mit der Maus vergrößern, aber es bleibt eine Zeile Text unendlich lang... ohne Zeilenumbruch.

Wie kann ich das Mitteilungsfeld auf SICHTBARE 4 Zeilen bringen und einen automatischen Umbruch schaffen, der dem Leser erlaubt, seine Mitteilung nochmlas gut und leicht zu lesen und zu checken, bevor es das Formular abschickt?

Form: www.lanzarote-virtual.com/contact/buchungsanfrage
Website (Homepage): www.lanzarote-virtual.com/

Freue mich auf den Support.

Pedro de Maciot, Lanzarote, Islas Canarias, España

Hallo Pedro,

wenn die Textarea nicht nur 1-Zeilig dargestellt wird, liegt das in der Regel daran, dass im CSS des Templates eine Regel definiert ist, die die Höhe für Textareas festlegt und ein Selektor verwendet wird, der stärker ist als die Selektoren im CSS von Visforms. Abhilfe kann hier nur eine individuelle Analyse des CSS schaffen.

Du kannst aber mal versuchen in der Formular Konfiguration die Option zu aktivieren, die das Bootstrap Formular CSS lädt (obwohl du ein Bootsttrap Template hast). Evtl. behebt das das Problem.

Wenn du für das Feld vom Typ Texterea den haken bei "Editor" setzt bindet Visforms immer automatisch den TinyMCE Editor mit einer stark reduzierten Benutzeroberfläche ein (du muss das Editor Plugin vom TinyMCE hierfür aktivieren) und nicht deinen Standard-Editor. Vielleicht kannst du dein Problem lösen, indem du doch den Editor aktivierst.

Herzliche Grüße,
Aicha

Hallo Aicha,

also ich habe den Editor TinyMCE einmal eingefügt und auf einfachste Form gestellt - das sieht nicht gut aus, da der Editor die gesamte Breite nimmt und mindestens 10 bis 15 Zeilen in der Höhe einstellt - das kann man nicht reduzieren. Im PC ginge das noch aber auf dem Samsung oder iPhone ist das ein kompletter Bildschirm nur mit dem Editor belegt. Das finde ich im Design unmöglich. Ich möchte nur dem Kunden ein Feld vorgeben (das dann automatisch auch im Handy die Tastatur einschaltet beim betippen) in dem er seine Wünsche eingeben kann. Sind meistens nur 3 bis 4 Zeilen.

In Kommunikation via Forum Support mit meinem Template Lieferanten "JoomlaPlates.de": er hat das Problem nicht - bei ihm zeigte sich das Feld exakt und perfekt. Scheinbar ein Betriebssystem-Problem (Windows/Mac/Android)

Aber JoomlaPlates hat mir eine Lösung geschickt zur Überschreibung des CSS Files via Custom.css im Template: es funktioniert. Der Overwrite gibt den Befehl zur Zeilenhöhe, wie eingestellt! Siehe: www.lanzarote-virtual.com/contact/buchungsanfrage .

Herzliche Grüße nach Germany
Pedro

Hallo Pedro,

ich freue mich zu hören, dass das Problem gelöst ist.

Könntest du vielleicht das CSS, das via Custom.css neu hinzugefügt wurde und das Problem behoben hat, hier posten?
Danke und Gruß,
Aicha

Hallo Aicha,

hier ist das Zusatz-Script im CSS (custom.css), das in meinem Template die Werte der Felder überschreibt bzw. festlegt, dass die eingegebene Zeilen-Höhe eingehalten wird:

/* ========================================================================
Overwrite for fields in the form page - visform
========================================================================== */

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
height: auto !important;
}

Ich weiß natürlich nicht, ob das bei anderen Templates funktioniert - dieses CSS ist abgestimmt auf mein Warp7 / Bootstraps Template Joomla! 3.4.3, made by JomaPlates.de

Herzliche Grüße - Pedro de Maciot ( www.lanzarote-virtual.com )