# Einkaufswelt-Element height auto

**URL:** <https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791>\
**Category:** Programmierung\
**Created:** [15. März 2018 um 13:36 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791 "2018-03-15T13:36:39Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [15. März 2018 um 13:36 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/1 "2018-03-15T13:36:39Z")

</div>

Hallo,&nbsp;

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&nbsp;[Shopware 5: HTML-Element & automatische Höhe](https://www.varia-creare.de/shopware-5-einkaufswelten-html-elemente-mit-automatischer-hoehe/) ausprobiert, aber das Codebeispiel von dort ist wohl nicht mehr mit der aktuellen 5.4.1&nbsp;Codebase kompatibel…

&nbsp;

weiß jemand Rat?

---

<div class="post-metadata">

**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\
**Post date:** [16. März 2018 um 11:18 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/2 "2018-03-16T11:18:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [16. März 2018 um 11:27 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/3 "2018-03-16T11:27:07Z")

</div>

@simkli‍ damit habe ich wie gesagt schon rumprobiert.

&nbsp;

die HTML-Struktur ist folgende

&nbsp;

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

Ergebnis: keins, es macht keinen Unterschied …

&nbsp;

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)…

&nbsp;

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

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [3. April 2018 um 13:52 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/4 "2018-04-03T13:52:15Z")

</div>

push

---

<div class="post-metadata">

**Author:** ![anfuet](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@anfuet](https://forum.shopware.com/u/anfuet)\
**Post date:** [25. Mai 2018 um 11:54 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/5 "2018-05-25T11:54:30Z")

</div>

Hallo @[FloC3](https://forum.shopware.com/profile/27446/FloC3)

hast du dazu schon einen Lösungsansatz gefunden?&nbsp;

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]);
        },

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![derwunner](https://avatars.discourse-cdn.com/v4/letter/d/e5b9ba/32.png) [@derwunner](https://forum.shopware.com/u/derwunner)\
**Post date:** [25. Mai 2018 um 12:35 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/6 "2018-05-25T12:35:59Z")

</div>

Hallo,

&nbsp;

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.

&nbsp;

&nbsp;

MFG

&nbsp;

derwunner

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [25. Mai 2018 um 12:45 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/7 "2018-05-25T12:45:35Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![derwunner](https://avatars.discourse-cdn.com/v4/letter/d/e5b9ba/32.png) [@derwunner](https://forum.shopware.com/u/derwunner)\
**Post date:** [25. Mai 2018 um 12:56 UTC](https://forum.shopware.com/t/einkaufswelt-element-height-auto/51791/8 "2018-05-25T12:56:00Z")

</div>

> [@FloC3 schrieb:](https://forum.shopware.com/profile/27446/FloC3 "FloC3")
> 
> @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.&nbsp;

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