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

Sonnenna

Neues Mitglied
7. Januar 2021
18
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
490
144
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
18
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
18
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

Gut bekanntes Mitglied
19. Dezember 2018
103
9
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
490
144
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
103
9
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
792
131
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
Kostenlos Einsteigerschulung: Tag 7 Teil 1: Einführung in JTL-Shop 5 mit OPC Messen, Stammtische und interessante Events 0
Neu [JTL-Shop 5] OPC Portlets auch in Tabs ermöglichen, die in der Wawi als Attribute angelegt sind (tab1 name, tab2 name, etc) JTL-Shop - Ideen, Lob und Kritik 2
Kostenlose Einsteigerschulung: Tag 7 Teil 1: Einführung in JTL-Shop 5 mit OPC Messen, Stammtische und interessante Events 0
Neu JTL Shop 5 OPC Akkordeon: Reihenfolge der Gruppen JTL-Shop - Ideen, Lob und Kritik 1
kostenfreie JTL-Einsteigerschulung: Einführung in JTL-Shop 5 mit OPC Messen, Stammtische und interessante Events 0
Neu eBay shop - jtl wadi eBay-Anbindung - Ideen, Lob und Kritik 0
Neu JTL Shop 4 & 5 Plugin " EU Umsatzsteuer " Plugins für JTL-Shop 0
Neu Import von URL-Pfaden fuer den JTL-Shop JTL-Ameise - Ideen, Lob und Kritik 1
Neu JTL Shop 5 - Kategorienschriftgröße und Position in Megamenu ändern Allgemeine Fragen zu JTL-Shop 4
Neu JTL Shop 5 - Merkmalfilter immer ausgeklappt darstellen Allgemeine Fragen zu JTL-Shop 2
JTL SHop 5.0.1 > Batch 5.0.3 ständig Warenkorb ist leer Einrichtung JTL-Shop5 1
Gelöst JTL Hosting Shop 4.06 (B17) / PHP 7,4 / Euer Newsletter Installation / Updates von JTL-Shop 5
Neu [JTL Shop 5] Frage zum Produkt JTL-Shop - Ideen, Lob und Kritik 1
JTL Shop 5.0.1 - Kein richtiger Abgleich der Artikel-Fotos zwischen WAWI und Shop Einrichtung JTL-Shop5 4
JTL Shop 5.0.1 - Eigene Seite wird im Backend nicht mehr angezeigt nach dem Verschieben in andere Linkgruppe Einrichtung JTL-Shop5 5
Neu JTL Shop 5.0 - Keine Kategoriebilder JTL-Shop - Fehler und Bugs 2
Neu WaWi Aufträge an JTL Shop 5 übertragen? Onlineshop-Anbindung 0
Neu [JTL Shop 5] OnPage Composer - Verbesserungen JTL-Shop - Ideen, Lob und Kritik 2
Neu Beiträge für verschiedene Endgeräte ausblenden oder darstellen - JTL Basic Shop hosted by JTL Allgemeine Fragen zu JTL-Shop 2
Neu JTL Shop 4 PHP 7.4 Unterstützung Allgemeine Fragen zu JTL-Shop 1
Neu Artikelaufruf in JTL Shop 4.06 ohne Änderung plötzlich sehr langsam. Ratlos! Betrieb / Pflege von JTL-Shop 2
Neu Subshop mit JTL Shop Hauptshop Shopify Umstieg auf JTL-Shop 0
Neu JTL Shop 5 Konto Erstellung Allgemeine Fragen zu JTL-Shop 0
Neu JTL-Wawi - Abgleich mit Woocommerce Shop schlägt fehl WooCommerce-Connector 4
Neu Artikelbilder@Webshopabgleich zu JTL-Shop ==> HTTP Error 403 JTL-Shop - Fehler und Bugs 1
Neu JTL Shop 5 - Versandkosten in Verbindung mit Versandklassen falsche Darstellung in der Warenkorbvorschau JTL-Shop - Fehler und Bugs 1
Neu JTL Shop 4: Kaufabwicklung: Lieferadresse ändern JTL-Shop - Ideen, Lob und Kritik 2
Neu JTL Shop erweitern oder Konfigurator nutzen Allgemeine Fragen zu JTL-Shop 0
Neu JTL SHOP 4 - Suche plötzlich langsam Betrieb / Pflege von JTL-Shop 2
Neu Powered by JTL-Shop Hinweis entfernen? Allgemeine Fragen zu JTL-Shop 5
Update von JTL Shop 4 auf 5 bei externer WaWi Upgrade JTL-Shop4 auf JTL-Shop5 5
Neu JTL-Shop 5.0.1 - Registrierung Rechnungsadresse anzeige NUR der Länder nach der GEO-BlockingVerordnung und NICHT der ganzen Welt, wie? Allgemeine Fragen zu JTL-Shop 8
Neu Änderungen am Shop ohne JTL Theme Editor Templates für JTL-Shop 7
Neu hreflang fehlt: Mehrsprachigkeit JTL Shop 5.0.0 JTL-Shop - Fehler und Bugs 6
Beantwortet NOVA unter JTL Shop 5 zeigt auf Startseite nur Header und Footer JTL-Shop - Fehler und Bugs 2
Neu Warning: Invalid argument supplied for foreach() in /home/.sites/298/site8438217/web/classes/class.JTL-Shop.Artikel.php on JTL-Shop - Fehler und Bugs 1
Neu JTL Shop 5: Pflichtfreitext-Angabe des Kunden verschwindet im Warenkorb & demnach auch in Bestellung + WAWI JTL-Shop - Fehler und Bugs 2
Neu Warum nimmt der JTL Shop teilweise keine Preisaktualisierungen von JTL wawi an? JTL-Wawi - Fehler und Bugs 1
Neu JTL-SHOP 5 - Checkbox Text für 3. Sprache wird nicht gespeichert JTL-Shop - Fehler und Bugs 5
Neu Wo/Wie wird der Lizenzschlüssel bei einem Upgrade der CFE auf die JTL Shop Standardversion eingetragen? Installation / Updates von JTL-Shop 4
Neu JTL Shop 5 - Container mit Link versehen - wie geht das Allgemeine Fragen zu JTL-Shop 3
Neu Performance JTL Shop 5 - 200.000 ms Idle Wert?! Plesk Strato Betrieb / Pflege von JTL-Shop 2
Neu [JTL Shop 5] Filter-URLs sind nicht nofollow JTL-Shop - Fehler und Bugs 4
Neu JTL-Shop-Hosting Plesk Git dump-autoload Allgemeine Fragen zu JTL-Shop 0
Neu Anleitung Cleverreach an JTL Shop v.4 Plugins für JTL-Shop 0
Neu Bestellstatus wird bei Teillieferungen zwischen WAWI und JTL-Shop 5.0.1 nicht richtig synchronisiert JTL-Shop - Fehler und Bugs 0
Neu [JTL Shop 5] "Meine Käufe": doppelter Eintrag unter "Gebundene Lizenzen" JTL-Shop - Fehler und Bugs 0
Neu Deprecated: JTL\Shop::DB is deprecated. Upgrade JTL-Shop4 auf JTL-Shop5 1
JTL-Shop 5.0.1 mit Wawi 1.5.44.0 verbinden - Shop URL verweist nicht auf gültigen Shop Einrichtung JTL-Shop5 9
Spezialseite "Kontakt" nach Upgrade von JTL Shop 4 auf 5 Einrichtung JTL-Shop5 1

Ähnliche Themen