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

  • Temporäre Senkung der Mehrwertsteuer Hier findet ihr gesammelt alle Informationen, Videos und Fragen inkl. Antworten: https://forum.jtl-software.de/threads/mehrwertsteuer-senkung-vom-01-07-31-12-2020-offizieller-diskussionthread-video.129542/

Sonnenna

Neues Mitglied
7. Januar 2021
8
1
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
1611588943810.png

Mobile Version -> Sätze werden abgeschnitten
1611588980286.png

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
 
  • Gefällt mir
Reaktionen: Wissenssammler

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
216
73
Hallo @Sonnenna

das scheint so von Bootstrap zu kommen und verantwortlich dafür ist folgendes:
CSS:
.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):
CSS:
.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
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: PETrian

Sonnenna

Neues Mitglied
7. Januar 2021
8
1
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

Neues Mitglied
7. Januar 2021
8
1
Hallo @Sonnenna

das scheint so von Bootstrap zu kommen und verantwortlich dafür ist folgendes:
CSS:
.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):
CSS:
.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

Aktives Mitglied
19. Dezember 2018
86
6
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

1612200273699.png

Danke im Voraus
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
216
73
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:
CSS:
.accordion h2 .btn-link {margin: auto}
.accordion .card-header {background-color: #fff}
Viele Grüße
Michael
 
  • Gefällt mir
Reaktionen: PETrian

PETrian

Aktives Mitglied
19. Dezember 2018
86
6
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 :thumbsup: Die Frage, ob das einfach ne Option gibt die ich nicht finde is damit auch beantwortet.
Vielen Dank und erfolgreiche Woche noch.

mfg, PETrian
 

basteldehs

Sehr aktives Mitglied
27. Februar 2017
771
125
Chemnitz
Hi,
ja das sollten doch mehr Einstellmöglichkeiten rein, habe es auch mit CSS farbig gestaltet.
so schaut die Vorschau aus im OPC
arkordeon-1.jpg

und so auf der Seite:
arkordeon.jpg

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

Bitte verbessern, Danke

grüssle Mario
 
Ähnliche Themen Forum Antworten Erstelldatum des Themas
Feedback zu OPC in JTL Shop 5 JTL-Shop - Ideen, Lob und Kritik 32
Neu Google Pagespeed motzt über die OPC Gallerie im JTL Shop 5 Allgemeine Fragen zu JTL-Shop 0
Neu JTL Shop 5.0.1 - NOVA - Statisch komprimieren funktioniert nicht richtig JTL-Shop - Fehler und Bugs 0
Neu JTL shop und JTL WAWI auf rootserver einrichten Starten mit JTL: Projektabwicklung & Migration 1
Neu Im JTL Shop Preisbezeichnung ändern "Alter Preis" Allgemeine Fragen zu JTL-Shop 1
Neu Shopware - Connector - JTL 5 Shop Umstieg auf JTL-Shop 0
Neu Auswahlhilfe JTL Shop 5 Allgemeine Fragen zu JTL-Shop 2
Neu JTL Shop 5 Hosting mit Miete wo? User helfen Usern - Fragen zu JTL-Wawi 1
Neu [S] Freelancer für Pluginerstellung JTL Shop 5 - global payments Zahlungsanbieter Dienstleistung, Jobs und Ähnliches 0
Neu Artikelexport aus JTL Shop 5 exportieren fehler JTL-Shop - Fehler und Bugs 1
Neu authorized by Plugin exs_aby_252 JTL Shop 5 defekt? Plugins für JTL-Shop 2
Neu Bilderanimation im JTL Shop Allgemeine Fragen zu JTL-Shop 0
Kontaktformular JTL Shop 5 Einrichtung JTL-Shop5 0
Neu JTL Shop 5 Ladezeit 3 - 5 sek. aber JTL Shop 4 nur max. 2 Sekunden Allgemeine Fragen zu JTL-Shop 9
Neu Retouren Verwaltung etc. in JTL Shop JTL-Shop - Ideen, Lob und Kritik 0
Neu JTL Shop 5 - Artikeldetailseite - Artikelpreise mit vierstellen nach dem Komma & Artikelpreise zusammenrechnen Allgemeine Fragen zu JTL-Shop 10
Neu 502 Bad Gateway durch JTL Shop 5 Amazon Pay plugin 1.02 Technische Fragen zu Plugins und Templates 5
Neu Bestehenden ebay Shop in JTL richtig einpflegen Einrichtung und Installation von JTL-eazyAuction 3
Neu JTL-Shop 5 - Wie fit für SEO Allgemeine Fragen zu JTL-Shop 0
nach Update von JTL Shop 4 auf 5 keine Kategoriebilder mehr Upgrade JTL-Shop4 auf JTL-Shop5 5
Neu JTL Shop 5 - Kunden Login funktioniert plötzlich nicht mehr JTL-Shop - Fehler und Bugs 1
Udpate auf JTL 5.1 Shop Upgrade JTL-Shop4 auf JTL-Shop5 2
Neu JTL-Shop3 Tiny für JTL Shop 4.06.17 Templates für JTL-Shop 0
Neu Verbindung JTL Shop 5 mit Wawi nicht möglich Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop 5 Keine Neuregistrierung möglich Einrichtung JTL-Shop5 3
Neu JTL Shop 5 Ausverkaufte Produkte in der Suche ausblenden Allgemeine Fragen zu JTL-Shop 0
Neu JTL Shop verleihen Allgemeine Fragen zu JTL-Shop 0
Neu Varianten als einzelne Artikel im JTL Shop Allgemeine Fragen zu JTL-Shop 6
Neu JTL Shop 4 - Als Gast bestellen - Einstellung 326 auf "ja" - Bestellung trotzdem nicht möglich als Gast - warum? Allgemeine Fragen zu JTL-Shop 4
Neu JTL Shop 5 - Datenschutzeinstellungen Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop 5, Nova Template, wie bekomme ich Kategorien und unter diesen, die Artikel sichtbar? Allgemeine Fragen zu JTL-Shop 4
Neu JTL Shop 5 mit Internet Explorer Allgemeine Fragen zu JTL-Shop 3
Google Analytics in JTL-Shop 5 Upgrade JTL-Shop4 auf JTL-Shop5 2
Gelöst JTL Shop 5 Nova Template Problem beim Einrichten des PayPal Plug-ins Einrichtung JTL-Shop5 2
JTL Shop 5: Seiten im KOPF-Bereich werden nicht mehr angezeigt Einrichtung JTL-Shop5 7
Gutscheine Einlösen in JTL-Shop 5 Einrichtung JTL-Shop5 2
Neu JTL Shop 5 Artikelsortierung Allgemeine Fragen zu JTL-Shop 2
Neu JTL Shop 5.0 Artikelsortierung Elemente hinzufügen Allgemeine Fragen zu JTL-Shop 0
JTL Shop sync mit WAWI im internen Netz Einrichtung JTL-Shop5 1
JTL Shop reizt die "max_user_connections" von mysql aus.. Einrichtung JTL-Shop5 4
Neu JTL Shop 4 auf MariaDB Allgemeine Fragen zu JTL-Shop 2
Neu JTL Shop einrichten - JTL Hosting Allgemeine Fragen zu JTL-Shop 2
Neu JTL Shop 5 mit lokaler IP Adresse (Lizenz) möglich Onlineshop-Anbindung 3
Neu JTL Shop Versandarten - Versandklassen einrichten Betrieb / Pflege von JTL-Shop 1
Neu JTL Shop 5 - Datenbank optimieren Allgemeine Fragen zu JTL-Shop 0
Neu Sprachvariablen in JTL-Wawi Artikelbeschreibung aus dem JTL-Shop Allgemeine Fragen zu JTL-Shop 0
Neu JTL Shop 5 Bug - Mobile Version Menü Unterkategorien verschwinden beim scrollen JTL-Shop - Fehler und Bugs 2
Fehler Bugs Jtl Shop 5 Einrichtung JTL-Shop5 4
Neu JTL Shop Artikel durch den Inhalt von "Eigene Felder" finden User helfen Usern - Fragen zu JTL-Wawi 0
Neu JTL Shop 5 ... Benutzer-Steuerung möglichst über Merkmale ... Ideen/Lösungen gesucht Allgemeine Fragen zu JTL-Shop 5
Ähnliche Themen