\
**Category:** Allgemein\
**Created:** [6. November 2015 um 10:00 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008 "2015-11-06T10:00:44Z")\
**Posts on this page:** 20\
**Page:** 1
**Author:**  [@Micoud](https://forum.shopware.com/u/Micoud)\
**Post date:** [6. November 2015 um 10:00 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/1 "2015-11-06T10:00:44Z")
Hallo zusammen, wir stellen gerade einen Shop von Shopware 4 (Conexco Responsive Template) auf Shopware 5 um. Bei der responsive-Fähigkeit hatte das Conexco Template einen großen Vorteil: hier haben sich die HTML Elemente, also hauptsächlich Texte an die jeweilige Bildschirmauflösung angepasst, ohne dass Scrollbalken entstanden sind. Bei Shopware 5 ist das leider anders, hier entstehen ständig Scrollbalken bei Anpassung der Bildschirmgröße. Hat jemand eine Idee wie sich das verhindern lässt, bzw. gibt es eine Möglichkeit, die „Conexco-Funktion“ einzustellen? Vielen Dank für Eure Hilfe!
---
**Author:**  [@trixx](https://forum.shopware.com/u/trixx)\
**Post date:** [6. November 2015 um 10:10 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/2 "2015-11-06T10:10:34Z")
[quote=“Micoud”]Hallo zusammen, wir stellen gerade einen Shop von Shopware 4 (Conexco Responsive Template) auf Shopware 5 um. Bei der responsive-Fähigkeit hatte das Conexco Template einen großen Vorteil: hier haben sich die HTML Elemente, also hauptsächlich Texte an die jeweilige Bildschirmauflösung angepasst, ohne dass Scrollbalken entstanden sind. Bei Shopware 5 ist das leider anders, hier entstehen ständig Scrollbalken bei Anpassung der Bildschirmgröße. Hat jemand eine Idee wie sich das verhindern lässt, bzw. gibt es eine Möglichkeit, die “Conexco-Funktion” einzustellen? Vielen Dank für Eure Hilfe![/quote] Hi, die Scrollbalken hatten mich auch gestört. Die Scrollbalken lassen sich aber ganz einfach ausblenden. Folgender Therad hält die Lösung bereit: [viewtopic.php?t=29392](http://forum.shopware.com/viewtopic.php?t=29392) Gruß Gesendet von meinem MX4 mit Tapatalk
---
**Author:**  [@Micoud](https://forum.shopware.com/u/Micoud)\
**Post date:** [6. November 2015 um 10:23 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/3 "2015-11-06T10:23:22Z")
Danke für den Hinweis! In welchem Verzeichnis genau finde ich die Datei die angepasst werden muss?
---
**Author:**  [@trixx](https://forum.shopware.com/u/trixx)\
**Post date:** [6. November 2015 um 13:38 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/4 "2015-11-06T13:38:16Z")
> [@Micoud](#):
>
> Danke für den Hinweis! In welchem Verzeichnis genau finde ich die Datei die angepasst werden muss?
---
**Author:**  [@vc-nm](https://forum.shopware.com/u/vc-nm)\
**Post date:** [6. November 2015 um 13:44 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/5 "2015-11-06T13:44:55Z")
Das löst aber noch nicht das Problem, dass die HTML Elemente ihre Höhe automatisch anpassen. Aber auch das lässt sich lösen: Datei: themes/Frontend/DEINTHEME/widgets/emotion/index.tpl Folgender Code (Zeile 45): [code]
[/code] austauschen gegen: `
` Was passiert hier? Es wird per SMARTY ausgelesen, ob es sich beim Emotion Element um ein HTML Element handelt. Falls ja, wird die Höhe auf “auto” gesetzt. Falls nein, wird die Höhe aus dem Editor angewendet. Damit werden in HTML-Einkaufswelt Elementen die Elemente automatisch an die Höhe des Inhaltes angepasst und es gibt weder Scrollbalken, noch ungewollten White-Space 😉
---
**Author:**  [@Micoud](https://forum.shopware.com/u/Micoud)\
**Post date:** [9. November 2015 um 13:21 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/6 "2015-11-09T13:21:52Z")
Perfekt, das ist die Lösung! Besten Dank!
---
**Author:**  [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [9. November 2015 um 13:35 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/7 "2015-11-09T13:35:25Z")
[quote=„vc-nm“]Das löst aber noch nicht das Problem, dass die HTML Elemente ihre Höhe automatisch anpassen. Aber auch das lässt sich lösen: Datei: themes/Frontend/DEINTHEME/widgets/emotion/index.tpl Folgender Code (Zeile 45): [code]
[/code] austauschen gegen: `
` Was passiert hier? Es wird per SMARTY ausgelesen, ob es sich beim Emotion Element um ein HTML Element handelt. Falls ja, wird die Höhe auf „auto“ gesetzt. Falls nein, wird die Höhe aus dem Editor angewendet. Damit werden in HTML-Einkaufswelt Elementen die Elemente automatisch an die Höhe des Inhaltes angepasst und es gibt weder Scrollbalken, noch ungewollten White-Space ;)[/quote] Danke. Frontend/DEINTHEME/widgets/emotion/index.tpl Wird die Datei dann auch „extended“? Grüße Michael
---
**Author:**  [@MSatler](https://forum.shopware.com/u/MSatler)\
**Post date:** [6. Januar 2016 um 18:24 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/8 "2016-01-06T18:24:25Z")
Genau das, was ich gesucht habe. DANKE!
---
**Author:**  [@Vitago\_GmbH](https://forum.shopware.com/u/Vitago_GmbH)\
**Post date:** [6. Januar 2016 um 18:47 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/9 "2016-01-06T18:47:22Z")
Auch mich stören die Scrollbalken. Super - vielen Dank. 🙂 Lg
---
**Author:**  [@vc-nm](https://forum.shopware.com/u/vc-nm)\
**Post date:** [11. Januar 2016 um 14:47 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/10 "2016-01-11T14:47:55Z")
Hallo Zusammen, ich hab das auch hier nochmal übersichtlich zusammengefasst: [http://www.varia-creare.de/shopware-5-e … her-hoehe/](http://www.varia-creare.de/shopware-5-einkaufswelten-html-elemente-mit-automatischer-hoehe/) Allerdings gibt es aktuell im Firefox ein Problem, wenn Bilder enthalten sind. Diese werden nicht berechnet und abgeschnitten. Hat jemand hierfür schon eine Lösung? Ich bin noch nicht dahinter gekommen!
---
**Author:**  [@Akila](https://forum.shopware.com/u/Akila)\
**Post date:** [11. Januar 2016 um 18:42 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/11 "2016-01-11T18:42:14Z")
Hallo zusammen! Ich fand dieses Posting und die darin enthaltenen Beiträge & Lösungsvorschläge sehr hilfreich. Allerdings würde ich das ganze gerne etwas abändern: Die HTML-Elemente sollen nämlich nur in der Mobilen ansicht (Portrait & Landscape auf Smartphone und Portrait & Landscape auf Tablet) in der höhe angepasst werden. Auf dem Desktop soll es so bleiben wie es von Anfang an war. Weiß noch nicht recht wie ich das “if” ergänzen könnte damit das so funktioniert. Warum ich das ganze gerne so hätte ist recht Simpel: Wenn ich auf dem Desktop Bilder und Texte (Texte im HTML-Element) nebeneinander habe und einen Rahmen um den Text (Layout-Styling) hinzufüge, dann ist nun, dank automatisch angepasster Höhe, der Rahmen um den Text oft nicht auf der selben Höhe wie das Bild oder der Text nebenan. Ist der Text z.B. also etwas kürzer (von der Höhe her) als das Bild oder der Text links oder rechts daneben, dann ist der Rahmen um den Text entsprechend weiter oben und es sieht nicht stimmig / symmetrisch aus. Hat jemand also einen Lösungsvorschlag wie ich die automatisch angepasste Höhe nur für Mobile Geräte zulasse? Danke im Voraus!
---
**Author:**  [@Vitago\_GmbH](https://forum.shopware.com/u/Vitago_GmbH)\
**Post date:** [11. Januar 2016 um 19:10 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/12 "2016-01-11T19:10:22Z")
Hallo, das Problem ist mir auch schon aufgefallen. Aber mir wäre lieber wenn man das Problem generell lösen könnte, da ich es auch gerne in der Desktop Ansicht so haben möchte. Lg
---
**Author:**  [@Akila](https://forum.shopware.com/u/Akila)\
**Post date:** [12. Januar 2016 um 15:23 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/13 "2016-01-12T15:23:47Z")
Weiß niemand eine Möglichkeit aus folgendem, funktionierenden Code: [code]
[/code] Den Mobilen Viewport mit einzubauen in irgendwas wie: … {if $template == ‚component\_html‘ UND Viewport == Mobile} …? Das UND wird ja soweit ich weiß mit zwei Strichen „||“ ausgedrückt, aber das mit dem Viewport mobil klappt bei mir nicht so wie ich es mir vorstelle 😑 Danke im Voraus!
---
**Author:**  [@vc-nm](https://forum.shopware.com/u/vc-nm)\
**Post date:** [12. Januar 2016 um 17:28 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/14 "2016-01-12T17:28:23Z")
Damit: {if $template == ‚component\_html‘ UND Viewport == Mobile} bist Du hier auf der falschen Fährte! Das Smarty wird (wie PHP) vor ausgabe gerendert - es würde quasi fest definiert, welchen Viewport der User sieht. Wenn der User aber sein Fenster größer macht, dann wird die Ansicht ja angepasst. Weiß gerade nicht wie ich das erklären soll. Es würde sich evtl. media querys und !important bezeichnungen für die Klasse lösen lassen (da nur die inline-styles überschreiben), aber ich komm gerade nicht dazu, hier etwas auszuprobieren.
---
**Author:**  [@Akila](https://forum.shopware.com/u/Akila)\
**Post date:** [12. Januar 2016 um 17:52 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/15 "2016-01-12T17:52:31Z")
[quote=“vc-nm”]Das Smarty wird (wie PHP) vor ausgabe gerendert - es würde quasi fest definiert, welchen Viewport der User sieht. Wenn der User aber sein Fenster größer macht, dann wird die Ansicht ja angepasst. Weiß gerade nicht wie ich das erklären soll.[/quote] Danke erstmal für deine Antwort, aber ich denke ist schon ok so wie ich es geplant hab, denn es ist nur für Mobile Ansichten gedacht. Das heißt Fenster größer machen ist da nicht. Höchstens vom Switch von Portrait auf Landscape oder andersrum. Der Plan ist, dass wenn jemand den Shop auf nem Mobilen Gerät besucht (if viewport==mobile) dann height: auto;. else (-\> er besucht den shop NICHT auf viewport==mobile, sondern auf desktop) -\> dann height: itemHeight; Oder klappt das so dennoch nicht?
---
**Author:**  [@vc-nm](https://forum.shopware.com/u/vc-nm)\
**Post date:** [13. Januar 2016 um 09:23 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/16 "2016-01-13T09:23:05Z")
Das würde Grundsätzlich schon gehen, aber meines Wissens stellt die Shopware die Information, mit welchem Device der User kommt, nicht als Variable zur Verfügung {zumindest hab ich sie gerade nicht in der Debug-Console gefunden). Das heißt Du müsstest Dir hierfür ein Plugin schreiben. Wenn Du die Information dann in einer Smarty Variable hast, dann kannst Du hier auch mit if/else rangehen. Die Lösung über Media-Querys ist aber meiner Meinung nach sauberer. Liebe Grüße
---
**Author:**  [@Akila](https://forum.shopware.com/u/Akila)\
**Post date:** [13. Januar 2016 um 16:44 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/17 "2016-01-13T16:44:54Z")
Hallo vc-nm, ein Plugin zu schreiben erweist sich dann doch als mehr als meine Fähigkeiten und Zeit bisher zulassen. Mir ist vom Prinzip auch relativ egal ob das „Problem“ nun über Viewport oder media-query gelöst wird. Hauptsache es funktioniert so wie beschrieben. Oder annähernd so ähnlich. Gruß, Akila
---
**Author:**  [@Tanjinsan](https://forum.shopware.com/u/Tanjinsan)\
**Post date:** [5. Februar 2016 um 21:15 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/18 "2016-02-05T21:15:23Z")
Hallo Akila,
das würde mich auch interessieren. Hast du eine Lösung gefunden?
LG
---
**Author:**  [@Akila](https://forum.shopware.com/u/Akila)\
**Post date:** [17. März 2016 um 00:31 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/19 "2016-03-17T00:31:50Z")
So, muss den Thread nochmal ausgraben, da mir diese Sache (erst Recht nach einigen PNs) keine Ruhe gibt.
Folgende Idee habe ich mittlerweile gehabt:
In der „/themes/Frontend/THEMENAME/widgets/emoition/index.tpl“ habe ich nun folgendes gemacht:
In Zeile 1 (also vor allem anderen Code) habe ich folgendes eingefügt:
> \
Die Mobile\_Detect.php habe ich von hier:
[https://github.com/serbanghita/Mobile-Detect/blob/HEAD/Mobile\_Detect.php](https://github.com/serbanghita/Mobile-Detect/blob/HEAD/Mobile%5C_Detect.php)
Code-Beispiele gibt es hier: [http://mobiledetect.net/](http://mobiledetect.net/)
Diese Datei liegt im selben Ordner wie die index.tpl
Weiter unten, also ab Zeile 45 (nun ab Zeile 46) der index.tpl habe ich mich an verschiedenen Variationen versucht. Hier das Beispiel, das am besten funktioniert hat:
> style=„padding-left: {$cellSpacing / 16}rem;
> padding-bottom: {$cellSpacing / 16}rem;
> if ($template == ‚component\_html‘ && $detect-\>isMobile() ) {
> height: auto;
> } elseif ($template == ‚component\_html‘ && !$detect-\>isMobile() ) {
> height: {$itemHeight / 16}rem;
> } endif;
> top: {$itemTop / 16}rem;
> left: {$itemLeft}%;“\>
Was ich damit vorhabe ist ganz einfach:
Wenn es sich um ein HTML-Element handelt ($template == component\_html) UND (&&) es sich um ein mobile Gerät handelt ( $detect-\>isMobile() ), dann soll die Höhe Automatisch angepasst werden (height: autO;)
Wenn dem NICHT so ist (elseif) aber es sich noch immer um ein HTML-Element handelt ($template == component\_html) und KEIN mobiles Gerät ( !$detect-\>isMobile() ) sondern um ein Desktop-Browser handelt, soll die Standard-Höhe ( $itemHeight / 16rem; ) dargestellt werden.
Was das jedoch Bewirkt hat, ist recht Simpel: Leider nicht so viel wie erhofft. Die Höhen werden nach wie vor nicht wie Gewünscht angezeigt, weshalb ich zum Ursprung des weiter oben erwähnten Codes zurückkehren musste, ohne dieses „Problem“ lösen zu können. ☹
Ich weiß nicht wie und ob diese Methode überhaupt funktioniert, aber das ist das einzige was mir eingefallen ist.
Eventuell habe ich „if“, „else“ und „elseif“ nicht richtig eingesetzt bzw. umgesetzt.
Vllt muss man smarty mit {php} und {/php} erklären dass nun PHP kommt oder ganz anders ansetzen. Keine Ahnung.
Wenn jemand von euch einen besseren Durchblick / Programmierkenntnisse / Ideen hat -\> Her damit 😉
---
**Author:**  [@MIRR\_DE](https://forum.shopware.com/u/MIRR_DE)\
**Post date:** [25. Juli 2016 um 08:59 UTC](https://forum.shopware.com/t/responsive-html-elemente-in-einkaufswelten/32008/20 "2016-07-25T08:59:51Z")
> [vc-nm](https://forum.shopware.com/profile/14165/vc-nm) schrieb:
>
> > Das löst aber noch nicht das Problem, dass die HTML Elemente ihre Höhe automatisch anpassen.
> >
> > Aber auch das lässt sich lösen:
> >
> > Datei:
> > themes/Frontend/DEINTHEME/widgets/emotion/index.tpl
> >
> > Folgender Code (Zeile 45):
> >
> > austauschen gegen:
> >
> > Was passiert hier?
> > Es wird per SMARTY ausgelesen, ob es sich beim Emotion Element um ein HTML Element handelt.
> > Falls ja, wird die Höhe auf „auto“ gesetzt.
> > Falls nein, wird die Höhe aus dem Editor angewendet.
> >
> > Damit werden in HTML-Einkaufswelt Elementen die Elemente automatisch an die Höhe des Inhaltes angepasst und es gibt weder Scrollbalken, noch ungewollten White-Space 
> >
> > Hatte ich bisher so gemacht. Funktioniert aber nach dem Update auf 5.2.2 nicht mehr. Kann mir wer helfen wie das nun eingefügt werden muss?