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

Sonnenna

Aktives Mitglied
7. Januar 2021
40
4
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
1.315
449
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

Aktives Mitglied
7. Januar 2021
40
4
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

Aktives Mitglied
7. Januar 2021
40
4
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

Gut bekanntes Mitglied
19. Dezember 2018
109
12
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
1.315
449
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

Gut bekanntes Mitglied
19. Dezember 2018
109
12
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
 

mobade

Sehr aktives Mitglied
27. Februar 2017
831
150
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
Titel Forum Antworten Datum
Neu JTL-Shop 5.3 - Aktuell 5.3.1 Releaseforum 1
Neu JTL 1.8.12.0 - Artikelattribut für Shop importieren - Format CSV-Datei / Hilfe bei Import von individuellen Attributen für JTL-Shop (googlekat) JTL-Ameise - Ideen, Lob und Kritik 1
JTL Shop Gutscheine über JTL-Vouchers erstellen Allgemeine Fragen zu JTL-Vouchers 1
Neu JTL Shop Gutscheine über JTL-Vouchers erstellen Allgemeine Fragen zu JTL-Shop 0
Neu E-Commerce-Effizienz steigern: Welche Programmiersprache verbessert die JTL-Shop-Entwicklung? Technische Fragen zu Plugins und Templates 1
Neu Kompatibilitätsliste JTL Shop & JTL Wawi Installation / Updates von JTL-Shop 2
Neu JTL-Shop 5 Paypal Zahlung 30 Tage Zahlungsziel Allgemeine Fragen zu JTL-Shop 6
Neu JTL-Shop 5.3.0 RC3 Fehler nach Update Portlet Banner, fehlendes Produkt JTL-Shop - Fehler und Bugs 0
Neu Umstieg von Shopware 5 zu JTL Shop 5 - Ranking behalten Allgemeine Fragen zu JTL-Shop 2
Neu Verbindungsproblem Wawi (1.8.12.0) zum JTL-Shop (5.2.4) über localhost User helfen Usern - Fragen zu JTL-Wawi 0
Neu Lizenz zu verkaufen für JTL-Shop Standard Edition Allgemeine Fragen zu JTL-Shop 4
JTL Shop : automatisch setzen: Verfügbar ab: 28.04.2024 (Vorbestellung möglich) JTL-Wawi 1.8 0
Neu Programmierung eines Tools zur Verwaltung einer Datentabelle (JTL Shop 5) Technische Fragen zu Plugins und Templates 6
I have faced an issue while the JTL Shop order has synchronized to the JTL WAWI 1.8 version. JTL-Wawi 1.8 0
Neu JTL Shop 5 Umfrage!? Allgemeine Fragen zu JTL-Shop 0
Neu Woocommerce mit JTL Connector "Die Shop-URL verweist nicht auf einen gültigen Shop" WooCommerce-Connector 4
Hosting JTL- Shop unter https://...12358.jtl-shop.de/ Einrichtung JTL-Shop5 0
Neu JTL-Shop Standard Edition Lizenz zu verkaufen Umstieg auf JTL-Shop 7
Neu Wie kann ich im JTL-Shop einen Abwesenheitshinweis einstellen? Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop 5.30? Allgemeine Fragen zu JTL-Shop 9
Neu Anzeige von Neuheiten und Topsellern im JTL Shop 5 Allgemeine Fragen zu JTL-Shop 2
Neu NEU ✔️ PDF-Angebots-Plugin für den JTL-Shop 5 - PDF Angebote von der Produktseite oder aus dem Warenkorb heraus generieren B2C / B2B Plugins für JTL-Shop 5
Neu JTL Shop funktioniert nicht mehr Allgemeine Fragen zu JTL-Shop 2
Neu JTL Shop Template Domain lösen? Allgemeine Fragen zu JTL-Shop 0
Neu Migration von eCommerce-Integrator auf JTL Connector - Software 5 Shop Onlineshop-Anbindung 2
Neu CloudFlare RocketLoader und JTL-Shop OnPage Composer JTL-Shop - Fehler und Bugs 0
Neu JTL-Shop 5 und PHP OpCache Allgemeine Fragen zu JTL-Shop 9
Sprachauswahl im JTL Shop 5 Einrichtung JTL-Shop5 5
Neu JTL Shop und WAWI komplett testen vor Shop-Release Gelöste Themen in diesem Bereich 8
Neu JTL Wawi Warenwirtschaft mit Gambio Cloud-Shop Gambio-Connector 0
Neu Anfängerfrage nach der prinzipiellen Funktionsweise mit JTL-Shop und FFN Starten mit JTL: Projektabwicklung & Migration 4
Neu Neue Tab in JTL 5 Shop erstellen Allgemeine Fragen zu JTL-Shop 3
Neu JTL Shop nicht mehr erreichbar Allgemeine Fragen zu JTL-Shop 1
Update von JTL-Shop 4.06 auf JTL-Shop 5.1.1 geht nicht Upgrade JTL-Shop4 auf JTL-Shop5 4
Neu JTL-Shop 5 Nova-Template / Darstellung der Produktliste teilweise fehlerhaft JTL-Shop - Fehler und Bugs 1
Neu JTL-Shop 5.2.4 - Umlaute wird in Plugins falsch übergeben JTL-Shop - Fehler und Bugs 2
Kundenimport von OpenCart 2.3 zu JTL Shop 5 Einrichtung JTL-Shop5 0
Neu erster JTL Shop - Artikelbilder aus Cloudspeicher - aber nicht in die Wawi eazybuisiness DB Allgemeine Fragen zu JTL-Shop 0
Neu PAngV (PreisAngabenVerordnung) vom 28.05.2022 mit JTL-Wawi und JTL-Shop - bzgl. "Läuft JTL Wawi stabil?" Smalltalk 1
Beantwortet JTL-SHOP 5 / Anzeige Preise Artikelübersicht Allgemeine Fragen zu JTL-Shop 3
Neu JTL Konfigurator an anderen Shop binden Plugins für JTL-Shop 0
Neu Webp Grafiken in JTL-Shop 4.06 Betrieb / Pflege von JTL-Shop 2
Neu Tracking-Link-Variable für Sendungsreferenz - e-mil vorlage jtl-shop JTL-Shop - Ideen, Lob und Kritik 0
Neu AR - Augmented Reality im JTL Shop 5 Plugins für JTL-Shop 2
Neu Woocommerce Upsells und Cross-Sells werden af JTL Shop angezeigt. JTL-Wawi - Fehler und Bugs 0
Neu Aktueller Stand: Retouren in JTL-Shop Allgemeine Fragen zu JTL-Shop 14
Neu SMTP Mail einrichten JTL-Shop 5 User helfen Usern - Fragen zu JTL-Wawi 4
Neu Nach Migration auf JTL Shop 5 fehlerhafte PayPal Zahlungsmitteilungen Allgemeine Fragen zu JTL-Shop 0
Neu JTL-Shop Artikel in Wordpress darstellen Allgemeine Fragen zu JTL-Shop 3
JTL Mahnwesen Workflow- Email nach 30 Tagen noch nicht bezahlt. JTL-Wawi 1.8 0

Ähnliche Themen