Text in der Einkaufswelt passt sich nur teilweise an

Guten Tag. Ich habe die gleiche Einkaufswelt (das Design) für jedes Gerät separat erstellt. Soweit klappt das auch. Allerdings werden die Texte im HTML-Element entweder unten abgeschnitten und der Abstand zum unteren Rand der Box (HTML-Element) ist zu groß. Natürlich je nach dem auf welchen Gerät ich das anschaue bzw. wie ich das Browserfenster verkleinere oder vergrößere. Die Einstellung “Responsive Design Anpassung” habe ich auf Masonry-Effekt gestellt da es mit dem anderen Effekt die Schrift bis ins unleserliche verkleinert. Mache ich hier etwas falsch oder gibts da einen Trick? Danke Euch! Gruß

In meiner Testumgebung habe ich eine HTML-Box in Masonry gepackt und mir im Theme eine emotion.less angelegt. In dieser dann .emotion--mode-masonry .emotion--html { overflow-y: auto; -ms-overflow-style: scrollbar; } eingetragen, um der HTML-Box - wenn sie zu klein wird - per Auto eine “Scrollbar” zu verpassen.

Hallo Carsten. Danke für deinen Tip. Das ist schon mal eine Lösung. Mit den Scrollbars bin ich allerdings nicht so glücklich. Ich dachte mir ob es nicht möglich ist, dass einfach der Container entsprechend automatisch an den Inhalt angepaßt werden kann. Gruß UWE

Hallo Gibt es hier schon eine Lösung (exkl. Work-Around von oben)?? Denn wie folgt ist hier der Container sehr gross: und hier auf dem Smartphone, wurde der Container nicht erweitert. Der Text wird einfach abgeschnitten! Besten Dank und Gruss Cyril

Hallo. Ich muss dieses Thema nochmal hervorholen da ich nicht glauben kann dass nur zwei Leute dieses Problem haben. Ich habe auch noch keine Lösung dazu gefunden. Wie äußert sich das Shopware-Team dazu? Eine Antwort hierauf wäre klasse. DANKE! Gruß

Hallo. Stehe vor dem selben Problem. Weiß hier schon jemand was neues? Gruß

naja normalerweise solltest du eh auf responsiven Content setzen. Also je kleiner dein Endgerät wird, desto kürzer (dafür knackiger) dein Content. Aber ich bin auch noch nicht so zufrieden mit der html Box Gruss

Habe dazu mal ein Ticket eröffnet (für Votes): http://jira.shopware.de/?ticket=SW-11587 Gruss

hallo zusammen, ich musste aus o.g. Grund einige Einkaufswelten löschen und habe jetzt bei den Kategorien HTML-Elemente erstellt mit den Texten, die ich in den Einkaufswelten hatte. Wenn ich jetzt meine Kategorien aufrufe, ob Desktop oder Smartphone, wird der Text gekürzt und nach … kommt mehr erfahren->> Diese Lösung finde ich vorübergehend in Ordnung. Vielleicht hilft es Euch weiter. Schönen Abend bonilla

Hallo zusammen Bei der Version 5.0.1 war ja bekanntlich folgendes Problem: [quote]Wenn man eine Einkaufwelt mit Masonry-Effekt erstellt und man diese Einkaufswelt für alle Geräte aktiviert, dann wird das „HTML-Element“ mit Text leider nicht automatisch vergrössert, sondern der Text wird einfach abgeschnitten[/quote] Nun seit der Version 5.0.2 wurde dies behoben. Jedoch erscheint schon bei wenig Text ein „Scroll-Balken“ wo eigentlich gar keiner nötig wäre. (siehe Screenshot). Wo könnte man das definieren, damit der Scroll-Balken auch wirklich nur dann erscheint, wenn er nötig ist?

Link dazu: https://www.tradeby.ch/gartenzubehoer/f … bekleidung Besten Dank für die Hilfe. Gruss Cyril

*up*

[quote=„tradeby“] Nun seit der Version 5.0.2 wurde dies behoben. Jedoch erscheint schon bei wenig Text ein „Scroll-Balken“ wo eigentlich gar keiner nötig wäre. (siehe Screenshot). Wo könnte man das definieren, damit der Scroll-Balken auch wirklich nur dann erscheint, wenn er nötig ist? [/quote] Habe das gleiche Problem, gibt es eine Lösung?

Hi, leg eine emotion.less an und füge ein: .emotion–html { overflow: visible; } Nicht vergessen auch in die all.less und Cache löschen. :wink:

1 „Gefällt mir“

Hi Petra, danke schon mal für deine Antwort. Ich habe hier nun die .less Datei angelegt: shop/themes/Frontend/Eigen/frontend/_public/src/less/_components/emotions.less Mit der all.less weiß ich aber nicht was du meinst. Habe schon rausgefunden, dass ich die Datei darin angeben muss, aber wo und wie?! Grüße Christian

Hi, lege eine all.less unter /themes/Frontend/DeinTheme/frontend/_public/src/less an. dort trägst Du die emotion.less so ein: @import „_modules/emotion“; Jede less die Du erstellst, trägst Du dann auch hier ein. Danach Cache und Theme kompilieren. Kleines Beispiel aus meiner all.less: @import „_components/image-slider“; @import „_components/menu-scroller“; @import „_components/offcanvas-menu“; @import „_modules/global“; @import „_modules/header“; @import „_modules/index“; @import „_modules/emotion“; Alles klar? :wink:

1 „Gefällt mir“

Hallo Petra, ganz herzlichen Dank, jetzt hat es geklappt!

So gut ich das finde, dass man bei einem SW-Responsive-Template z.B. im Gegensatz zum Bootstrap framework beeinflussen kann, welche Inhalte „wo“ angezeigt werden, nervt die hier beschriebene Problematik doch gewaltig. Wenn man in einer Einkaufswelt nun Texte für alle Endgeräte passend anbieten will, hat man jetzt ja nicht mehr nur bis zu 5 Standard-Viewports (Desktop, Tablet Landscape, Tabplet Portrait, Mobile Landscape, Mobile Portrait) - Nein, im Grunde hat man jetzt entweder abgeschnittene Texte, Textinseln mit hässlichen Scrollbalken oder riesige Lücken, je nachdem welche Auflösung eines der Mobilen Geräte hat. Das wird beim Erstellen der Seiten allmählich zeitlich immer unwirtschaftlicher. Deswegen meine Frage am Rande: Sollte es nicht möglich sein, eine weitere „Responsive Design Anpassung“ beizusteuern, die dem Text/Html-Element eine Höhe von 100% des Bedarfes verpasst, so wie es Bootstrap macht, ohne den Text zu skalieren? Bzw., weil ich mit dem ganzen less noch nicht so gut vertraut bin, aber ich müsste doch eine eigene css-klasse anlegen können, die genau das macht, oder?

Wir stehen kurz vor dem Update auf die 5er und beschäftigen uns seit mehreren Stunden mit den Landingpages. So, wie das aktuell im Shop umgesetzt ist, ist es schier nicht zu gebrauchen, wenn man textlastige Landingpages hat. Und wenn dann verschiedene Landingpages unterschiedlich lange Texte haben, ist der Aufwand, nicht zu bewältigen. Warum kann das HTML-Element in einer Landingpage sich nicht so verhalten, wie in den Kategorien? Es passt sich immer der entsprechenden Breite an und gibt ab Punkt x den Link „mehr lesen“ aus. Wir werden jetzt Kategorien dazu verwenden, weil das mit den Landingpages viel zu Aufwendig ist.

:cry: Gleiches Problem. Es sollte doch irgendwie möglich sein, ganz normalen Fließtext in den Einkaufswelten so einzubinden, dass er auf allen Endgeräten vernünftig ausgegeben wird. Ist das nicht das Minimum das man von einem Template welches sich “responsive” nennt erwarten kann? Ich schaffe es jedenfalls nicht - bekomme immer Scrollbalken bzw. viel Leerraum. Ein über jede Hilfestellung dankbarer, Alex

Hallo zusammen, auch ich kämpfe seit der Umstellung mit dem gleichen Problem. Der Tipp von artep funktioniert leider nicht, da dann der Text einfach im Hintergrund nach unten aus der Box ragt. Der Tipp hier (deaktivieren des Stylings in der Einkaufswelt): themes-und-design-f101/nervige-kleinigkeiten-z-b-textabstand-in-html-boxelementen-t31306.html funktioniert leider auch nicht, dort erscheint dann der berüchtigte Scrollbalken. Das ganze Verhalten ist auch in der RC2 5.1 enthalten, gerade unter http://www.shopwaredemo.de getestet. Leider ist das o.g. Ticket als “Resolved” geschlossen worden, ohne das hier eine Lösung etc. beschrieben wurde… Ich hab in meiner Verzweifelung im Testsystem schon alle Plugins deaktiviert, eine neues System aufgesetzt etc. immer das gleiche Verhalten. So, hat noch jemand einen schlauen Tipp wie man das lösen kann, unter SW4 hat das ganze ja einwandfrei funktioniert :frowning: