[ GELÖST ]Kontaktformular Kommentarfeld Höhe anpassen... wo genau?

Shopware 5 Themes & Design
1

Ja die Mopi schon wieder… Im Kontaktformular empfinde ich das Kommentarfeld etwas zu “flach”. Klar, man kann es höher ziehen, doch ich hätte es gerne allgemein etwas höher haben, damit auch ein (fast)Blinder sehen kann, dass sich dort ein Kommentarfeld befindet. Ich habe mich bisher leider nicht viel mit den *less Dateien befassen können, von daher bin ich mir gerade nicht sicher, wie die Datei heißt, wo ich eine Höhenangabe oder ähnliches eintragen könnte. 

Lieben Dank schon mal für die Mühe

Grüße von der Mopi

2

Ok ich habe jetzt rumgesucht und in der Fields.less folgende Einträge gefunden. Ich gehe davon aus, dass für mich input[type=“text”] interessant sein _ könnte _.  Die Frage ist jetzt, wie baue ich das hier so um, dass ich nicht alles gleich zerlege… 

würde es ausreichen, direkt unter input[type=“text”], --> { .unitize(line-height, 120); } einzugeben, oder ist das zu wenig? Ich habe vorhin testweise hier —> .unitize(line-height, 19); die 19 durch 120 ersetzt, aber daruch habe ich alle Textfelder (auch für Name, Telefon etc.) erhöht. Das soll ja nicht. Das einzige, was größer werden soll, ist das Feld mit dem eigentlichen Kommentar. Vielleicht kann mir einer nen Schubbser in die richtige Richtung geben?? :slight_smile:

Das wäre der Oberhammer

Danke schon mal und lieben Gruß von der Mopi

*/

textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"] {
    .appearance(none);
    .border-radius();
    .box-sizing();
	.unitize(line-height, 19);
    .unitize(@input-font-size, 16, font-size);
    .unitize-width(290);
    .unitize-padding(10, 10, 9, 10);
    .box-shadow(inset 0 1px 1px @gray-dark);
    background: @input-bg;
    border: 1px solid @input-border;
    border-top-color: darken(@input-border, 5%);
    color: lighten(@text-color, 15%);
    text-align: left;

 

3

hat hierzu niemand eine Idee wie man das umsetzen könnte? :frowning:

4

Leg dir in deinem theme Ordner eine neue Less Datei all.less mit dem Inhalt:

@media screen and (min-width: @tabletViewportWidth) {
    .is--ctl-ticket {
        .forms--content {
            textarea {
                .unitize-height(300);
            }
        }
    }
}

Wie du eine Less Datei anlegst, kannst du hier nachschauen:

https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen

Die Zeile findest du hier für die Desktop Ansicht:

1 „Gefällt mir“
5

@Shopwareianer schrieb:

Leg dir in deinem theme Ordner eine neue Less Datei all.less mit dem Inhalt:

@media screen and (min-width: @tabletViewportWidth) {
.is–ctl-ticket {
.forms–content {
textarea {
.unitize-height(300);
}
}
}
}

Wie du eine Less Datei anlegst, kannst du hier nachschauen:

https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen

Die Zeile findest du hier für die Desktop Ansicht:

https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Responsive/frontend/_public/src/less/_modules/forms.less#L125-L127

 

hab ich gemacht… funktioniert leider immer noch nicht.

Was hab ich alles gemacht: da ich eine all.less bereits habe, habe ich einfach den Code +die Zeile für die Desktop Ansicht eingefügt. Da es nix gebracht hat, hab ich die forms.less in die _modules gepackt (kopiert), entsprechend dem Pfad wie die Datei auch im Responsive Theme liegt. In der all.less hab ich dann noch mit eingefügt: @import „_modules/forms“; 

hat auch nix genutzt… wo hab ich jetzt den Denkfehler… weil ich schätze mal, es liegt bei mir zwischen den Ohren… 

 

 

6

Okay geschafft… 

musste einfach in der forms.less in Zeile 127 

textarea {
			.unitize(margin-bottom, 15);
			.unitize-height(300);
		}

unitize-height (300) einfügen. Schon ist das Feld passend größer :slight_smile: Danke auf jeden Fall für den Schubbser…