Quantity Box ist viel zu breit

Shopware 5 Themes & Design
1

Hallo Zusammen, ich habe eine Liste von Artikel in einer Tabelle. Diese Tabelle wurde aus div Containern erstellet. In einer diese Spalten habe ich die Mengenbox wie folgt einegebaut: [code][/code] Zum Test habe ich dieseBox einfach mal in die Spalte Farbe platziert. Dies Beispiel sieht dann so aus: [img]http://www.verpacken24.com/test/quantity\_box.jpg[/img] Die Mengen-Box kümmert sich nicht umschließenden div-Container, sie wird zu breit angezeigt und ersteckt sich auch noch über die folgenden Container (VPE, Preis). Ich habe in den letzten beiden Tagen, versucht dies über size-Werte im select oder per CSS Stylevorgaben zu lösen, aber leider ohne Erfolg. Habe dies außerdem noch über table versucht, alles ohne Erfolg. Ich bin mit meinem Latein am Ende. Wie bekomme ich es hin, dass die Mengen-Box mit einer Breite von etwa 78px angezeigt wird? Freue mich über Eure Hilfe!! Danke & Gruß Daniel

2

Hi Daniel, im Responsive Template wird auf alle Comboboxen/Dropdowns das fancy select Plugin angewendet, welches das standardmäßige Aussehen der Comboboxen verändert. Im Grunde wird per JavaScript einfach nur ein Div-Container über die eigentliche Combobox gelegt um das gewünschte Aussehen zu erreichen. Dieser Container hat die Klasse .js–fancy-select und ist 290px breit. Genau hier liegt warscheinlich auch dein Problem. Am besten gibst du deiner Tabelle eine Klasse und definierst für alle innen liegenden .js–fancy-select Comboboxen eine neue Breite: .deine-tabelle { .js--fancy-select { .unitize-width(100); /\* Deine Größe \*/ } } Ich hoffe ich konnte dir damit weiterhelfen. Viele Grüße Tobias

1 „Gefällt mir“
3

[quote=„Tobias Berge“] Ich hoffe ich konnte dir damit weiterhelfen. [/quote] Super! Fumktioniert tadellos. Da wäre ich nie drauf gekommen.

4

Leider funktioniert das nicht bei nachgeladenen Auswahlboxen. Ich habe im Artikellisting, die Auswahlbox für die bestellbare Menge hinzugefügt. Wenn man die Seite betritt klappt das auch wunderbar. Wenn man jetzt jedoch nach unten scrollt, und weitere Artikel geladen werden, wird die Box nicht verändert. Das ist jetzt an der Stelle nun sehr störend. Wenn an die Seite betritt: [code]

1

[/code] Bei nachgeladenen Artikeln: [code][/code] Die Style Informationen hängen natürlich an js--fancy-select da ja hier auch die kompletten Informationen vorhanden sind..... Wie bekomme ich es hin, das das Plugin nochmal ausgeführt wird, wenn Artikel hinzukommen?

5

Hat denn jemand schon mal die Data-attributes  und fancy selects gearbeitet.

ich möchte gerne Bilder in den Dropdowns anzeigen.

 

http://www.lorenzostanco.com/lab/demos/FancySelect/Demo.html

 

 

6

Hey zusammen,

ich helfe einmal weiter  Thumb-Up

@kadis‍: Du verwendest hier das Infinite-Scrolling. Das FancySelect Plugin wird nur beim initialen Laden der Seite initialisiert. Sprich du musst das Plugin erneut aufrufen, wenn eine neue Seite geladen wird. Dazu haben wir in unsere jQuery Plugins eingebaut auf die du dich subscriben kannst.

Die Lösung müsste ungefähr so aussehen:

$.subscribe('plugin/swInfiniteScrolling/onFetchNewPageFinished', function() {
    window.StateManager.addPlugin('select:not([data-no-fancy-select="true"])', 'swSelectboxReplacement')
});

Keine Sorge, die Plugin-Basis sorgt dafür dass auf einen Element nicht zweimal das gleiche Plugin aufgerufen werden kann.

@mbdesign‍ Wir verwenden nicht das FancySelect Plugin, welches du verlinkt hast. Unser Plugin ist komplett selbst geschrieben und baut auf jQuery auf. Mit einer Plugin-Anpassungen kann ein Support für Bilder eingebaut werden. Denke aber daran dass es sich hier um ein Standard „select“-Element handelt, wenn du auf das FancySelect klickst, was bedeutet dass hier das Styling eingeschränkt ist: Modify jQuery plugins

Viele Grüße,
Stephan Pohl  Shopware

1 „Gefällt mir“
7

Und jetzt andersrum gefragt: wie kann ich aus bestimmten „select“ Elementen das jQuery Plugin „swSelectboxReplacement“ entfernen
und zurück zum HTML Standard könnte man in einem Standard HTML Select die Anzahl

der Optionen in einem iOS Gerät zumindest etwas beschränken/minimieren.



Best, Konrad

8

Hey @Konrad‍,

du kannst das Plugin vor der Intialisierung bei „DOMContentLoaded“ / „$(document).ready()“ von der Plugin Quene entfernen:

StateManager.removePluginFromQueue('select:not([data-no-fancy-select="true"])', 'swSelectboxReplacement');

Danach kannst du entweder eine Browser-Erkennung per „navigator.useragent“ oder das Plugin mit einer unterschiedlichen Konfiguration aufrufen, so dass es z.B. nicht für alle Viewports zur Verfügung stehen soll.

Viele Grüße,
Stephan

9

Hi [@Stephan Pohl](http://forum.shopware.com/profile/2/Stephan Pohl „Stephan Pohl“)‍,

man kann es auch einfacher direkt in dem Template lösen :wink:

Mit Hilfe des „data“ Attributes: data-no-fancy-select=„true“, Beispiel:

und schon wird die „Selectbox“ als Standard-HTML Select ausgegeben (also ohne „Fancy“ Design).

Unser Problem wurde aber leider auf iOS Geräten dadurch nicht gelöst - erst mit einem „JS Hack“ konnten
wir die Objekte im Off-Canvas wieder zum Leben erwecken - nach dem uns die „Drop-Downs“ aus Select alles
„einfrieren“ liessen - incl. des Scrollings. Es gehört zu den Eigenarten von iOS, dass sich dort die „Select Drop-Downs“
jeglicher Beeinflussung entziehen und zusätzlich auch das („Touch“) Dokument-Scrolling (was auch ein Thema für sich ist) willkürlich
verändern.

Best, Konrad