Gelöst JTL Shop 5 - OPC: Akkordeon Responsive Design

[Sonnenna]

Hallo zusammen,

ich erstelle gerade mit Hilfe des OPC eine FAQ-Seite. Hierzu bietet sich meiner Meinung nach das Layout-Portlet "Akkordeon" sehr gut an.

Das funktioniert auch super, außer man schaut sich das Ganze in der mobilen Version an.

Wenn der Text im "Kopf" des Akkordeons zu lang ist, wird der Satz einfach abgeschnitten und rutscht nicht wie man vermutet in eine neue Zeile.

Hier zur Verdeutlichung:
Hier die Desktop-Version -> alles passt


Mobile Version -> Sätze werden abgeschnitten


Gibt es eine Möglichkeit, dass der Text sich an das jeweilige Format anpasst und eben nicht abgeschnitten wird?

Vielen Dank schon im Voraus!

VG, Sonnenna

 

[MHillmann]

Hallo @Sonnenna

das scheint so von Bootstrap zu kommen und verantwortlich dafür ist folgendes:

.dropdown-toggle, [data-toggle=collapse]:not(.navbar-toggler) {
  white-space: nowrap;
}

du könntest also als schnelle Lösung so etwas machen (nur kurz getestet):

.dropdown-toggle, [data-toggle=collapse]:not(.navbar-toggler) {
  white-space: initial;
}

Ich würde das auch als Anzeigebug einstufen und mache gleich ein Ticket auf.

Viele Grüße
Michael

Edit: https://issues.jtl-software.de/issues/SHOP-4901

 

[Sonnenna]

Hallo @MHillmann,

danke für die schnellen Tipps und die Ticketeröffnung.

Ich werde das ausprobieren und melde mich dann ob es funktioniert hat.

Viele Grüße
Nadia

 

[Sonnenna]

Hallo @Sonnenna

das scheint so von Bootstrap zu kommen und verantwortlich dafür ist folgendes:

.dropdown-toggle, [data-toggle=collapse]:not(.navbar-toggler) {
  white-space: nowrap;
}

du könntest also als schnelle Lösung so etwas machen (nur kurz getestet):

.dropdown-toggle, [data-toggle=collapse]:not(.navbar-toggler) {
  white-space: initial;
}

Ich würde das auch als Anzeigebug einstufen und mache gleich ein Ticket auf.

Viele Grüße
Michael

Edit: https://issues.jtl-software.de/issues/SHOP-4901

Hallo @MHillmann,

dein Tipp hat sofort funktioniert. Vielen Dank fürs Helfen!

Viele Grüße
Nadia

 

[PETrian]

Hallo,

ich hänge mich hier mal an, denk das ist nur ein kleiner Hinweis der fehlt.

1. wie kann ich das Akkordeon bzw. sämtliche Punkte zentrieren?
2. wie bekomme ich den grauen Kasten weg



Danke im Voraus

 

[MHillmann]

Hallo @PETrian ,

das ist auf viele verschiedene Arten machbar.. Wenn du noch mehr Dinge anpassen möchtest würde ich empfehlen, dass du dich etwas mit CSS beschäftigst. Ansonsten probier mal so etwas:

.accordion h2 .btn-link {margin: auto}
.accordion .card-header {background-color: #fff}

Viele Grüße
Michael

 

[PETrian]

Hallo Michael,

vielen Dank für Deine Info - alles klar, per CSS, das geb ich meinem Kollegen weiter. Der kennt sich da schon bestens aus 👍 Die Frage, ob das einfach ne Option gibt die ich nicht finde is damit auch beantwortet.
Vielen Dank und erfolgreiche Woche noch.

mfg, PETrian

 

[mobade]

Hi,
ja das sollten doch mehr Einstellmöglichkeiten rein, habe es auch mit CSS farbig gestaltet.
so schaut die Vorschau aus im OPC


und so auf der Seite:


und doch muss man mit CSS arbeiten, also ganz einfach ist das net, mmmh 🙂

Bitte verbessern, Danke

grüssle Mario