Einkaufswelt-Element height auto

Shopware 5 Programmierung
1

Hallo, 

ich habe ein Einkaufswelt-Element mit Content, der erst bei einem Buttonklick nach unten aufsliden soll.

Leider hat ein Einkaufswelt-Element eine feste höhe und overflow hidden, d.h. der aufslidende Content ist unsichtbar.

Ich habe schon mit height: auto und overflow: visible experimentiert, aber dann verschwindet immer das ganze Einkaufswelt-Element…

habe auch schon die Tipps hier Shopware 5: HTML-Element & automatische Höhe ausprobiert, aber das Codebeispiel von dort ist wohl nicht mehr mit der aktuellen 5.4.1 Codebase kompatibel…

 

weiß jemand Rat?

2

Lösung Nr. 1: Du lässt die Höhe des Elements wie sie ist. Allerdings lässt du den Inhalt darüber hinauslaufen. Dann müsstest du nur den Inhalt von deinem Element absolut positionieren und das overflow:hidden; für dein Element entfernen.

Lösung Nr. 2: Du benutzt den Zeilenmodus in den Einkaufswelteinstellungen. Dann kannst du die Höhe wie gewünscht selbst setzen.

Viele Grüße

3

@simkli‍ damit habe ich wie gesagt schon rumprobiert.

 

die HTML-Struktur ist folgende

 

ich habe also das emotion–digital-publishing absolut positioniert und das emotion–element mit overflow:visible versehen.

Ergebnis: keins, es macht keinen Unterschied …

 

ps: das einzige was ich hinkriege ist, dass der Inhalt drüber raus geht. Allerdings überlappt er dann das nächste Einkaufswelt-Element darunter… das will ich nicht, der Content danach soll natürlich runtergeschoben werden (bzw. mein Element an sich muss wachsen)…

 

den Zeilenmodus kann ich nicht nutzen, da ich bei anderen Elementen auf die feste Höhe angewiesen bin.

4

push

5

Hallo @FloC3

hast du dazu schon einen Lösungsansatz gefunden? 

Die Höhe kommt aus dem jQuery:

setElementHeights: function() {
            var me = this, i = 1;

            for (i; i <= me.rows; i++) {
                var height = 100 / me.rows * i;
                me.$elements.filter('.row' + me.clsPrefix + '-' + i).css('height', height + '%');
            }

            $.publish('plugin/swEmotion/onSetElementHeights', [me]);
        },

 

6

Hallo,

 

ich verstehe dein Problem nicht ganz.

Einkaufswelt umstellen auf Zeilenmodus und schon passt sich die Höhe immer den Inhalt an. Also wenn du es aufklappst, vergrößert sich auch die Zeilenhöhe automatisch.

 

 

MFG

 

derwunner

7

@derwunner‍

Zeilenmodus hilft nur bedingt. Ich habe verschiedene Elemente. Manche enthalten viel Content, andere weniger. Ich möchte, dass alle Elemente aber gleich hoch sind. Und das lässt sich ja wunderbar über alle Devices hinweg über die Einkaufswelt steuern. Mit dem Zeilenmodus geht das nicht.

8

@FloC3 schrieb:

@derwunner‍

Zeilenmodus hilft nur bedingt. Ich habe verschiedene Elemente. Manche enthalten viel Content, andere weniger. Ich möchte, dass alle Elemente aber gleich hoch sind. Und das lässt sich ja wunderbar über alle Devices hinweg über die Einkaufswelt steuern. Mit dem Zeilenmodus geht das nicht.

Doch, geht schon, du musst nur im CSS feste Höhen vergeben oder besser Flexbox benutzen.

Bei ersterem definierst du dir einfach zwei Klassen: Eine fügst du im eingeklappten Zustand ein und die andere im ausgeklappten Zustand. 

Bei dem Flexbox Modell werden die Zeilenhöhen automatisch auf die selbe Höhe berechnet.