# Quantity Box ist viel zu breit

**URL:** <https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854>\
**Category:** Themes & Design\
**Created:** [4. Mai 2015 um 14:36 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854 "2015-05-04T14:36:42Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![verpacken24](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/verpacken24/32/16229_2.png) [@verpacken24](https://forum.shopware.com/u/verpacken24)\
**Post date:** [4. Mai 2015 um 14:36 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/1 "2015-05-04T14:36:42Z")

</div>

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]1 VE 2 VE 3 VE 4 VE … usw … 98 VE 99 VE 100 VE[/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

---

<div class="post-metadata">

**Author:** ![Tobias\_Berge](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@Tobias\_Berge](https://forum.shopware.com/u/Tobias_Berge)\
**Post date:** [4. Mai 2015 um 15:17 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/2 "2015-05-04T15:17:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![verpacken24](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/verpacken24/32/16229_2.png) [@verpacken24](https://forum.shopware.com/u/verpacken24)\
**Post date:** [4. Mai 2015 um 15:37 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/3 "2015-05-04T15:37:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kadis](https://avatars.discourse-cdn.com/v4/letter/k/c57346/32.png) [@kadis](https://forum.shopware.com/u/kadis)\
**Post date:** [8. September 2015 um 19:44 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/4 "2015-09-08T19:44:29Z")

</div>

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 2 3 4 5 6 7 8 9 101

[/code] Bei nachgeladenen Artikeln: [code]1 2 3 4 5 6 7 8 9 10[/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?

---

<div class="post-metadata">

**Author:** ![mbdesign](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/mbdesign/32/14160_2.png) [@mbdesign](https://forum.shopware.com/u/mbdesign)\
**Post date:** [26. August 2016 um 14:16 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/5 "2016-08-26T14:16:24Z")

</div>

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

ich möchte gerne Bilder in den&nbsp;Dropdowns anzeigen.

&nbsp;

[http://www.lorenzostanco.com/lab/demos/FancySelect/Demo.html](http://www.lorenzostanco.com/lab/demos/FancySelect/Demo.html)

&nbsp;

&nbsp;

---

<div class="post-metadata">

**Author:** ![Stephan\_Pohl](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stephan_pohl/32/10212_2.png) [@Stephan\_Pohl](https://forum.shopware.com/u/Stephan_Pohl)\
**Post date:** [29. August 2016 um 13:40 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/6 "2016-08-29T13:40:51Z")

</div>

Hey zusammen,

ich helfe einmal weiter&nbsp; ![Thumb-Up](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/thumb-up.png "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:&nbsp;[Modify jQuery plugins](https://developers.shopware.com/designers-guide/modify-jquery-plugins/)

Viele Grüße,  
Stephan Pohl&nbsp; ![Shopware](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/shopware.png "Shopware")

---

<div class="post-metadata">

**Author:** ![Konrad](https://avatars.discourse-cdn.com/v4/letter/k/f475e1/32.png) [@Konrad](https://forum.shopware.com/u/Konrad)\
**Post date:** [5. Februar 2017 um 10:56 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/7 "2017-02-05T10:56:40Z")

</div>

Und jetzt andersrum gefragt: wie kann ich aus bestimmten „select“ Elementen das jQuery Plugin „swSelectboxReplacement“ entfernen  
und zurück zum HTML Standard kommen (ganz ohne „js–fancy-select“ und „trigger“)? Es ist nämlich so, dass auf iOS Mobile zum fehlerhaften Verhalten der „js–fancy-select“ Elemente kommt, z.B. in folgendem Szenario: 10 selectboxen übereinader, in einem „off-canvas“ Container/Konfigurator platziert (jQuery), zusätzlich in einem „collapse“-Container platziert (jQuery), über 100 optionen pro selectbox Es ist leider in dem „swSelectboxReplacement“ nicht möglich zu definieren, wieviele Optionen angezeigt werden sollen, auf iOS Geräten wird man mit der Größe der „js–fancy-select“ Auswahlbox erschlagen, weil das Gerät alle Optionen (no limits) anzuzeigen versucht - und wie wir alle wissen - ist die Anzeige der Auswahlbox (iOS GUI) sehr großzügig bemessen (zuzüglich eines „lustigen Zipfels“) … Mit einem simplen HTML-Hack (natürlich nur für iOS Geräte) könnte man in einem Standard HTML Select die Anzahl  
  
der Optionen in einem iOS Gerät zumindest etwas beschränken/minimieren.   
  
  
  
Best, Konrad

---

<div class="post-metadata">

**Author:** ![Stephan\_Pohl](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stephan_pohl/32/10212_2.png) [@Stephan\_Pohl](https://forum.shopware.com/u/Stephan_Pohl)\
**Post date:** [6. Februar 2017 um 11:18 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/8 "2017-02-06T11:18:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Konrad](https://avatars.discourse-cdn.com/v4/letter/k/f475e1/32.png) [@Konrad](https://forum.shopware.com/u/Konrad)\
**Post date:** [11. Februar 2017 um 10:09 UTC](https://forum.shopware.com/t/quantity-box-ist-viel-zu-breit/26854/9 "2017-02-11T10:09:03Z")

</div>

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

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

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
