WIDGET "KARTEIKARTE/Registerkarte" und MOBILE ANSICHT

  • Hallo, ich habe auf meiner Homepage auf der Unterseite https://www.fotow.de/foto-w-em…spielen-auch-versand.html
    eine Registerkarte für drei Preislisten. Diese werden aber alle rechts angeschnitten. Die Darstellung ist also fehlerhaft.. Preise gar nicht zu sehen.
    Kunde rief mich gerade diesbezüglich an. Darstellung: iPHONE... FRAGE: Was habe ich falsch gemacht ? Gruss Axel

  • Wenn die Tabelle mit dem Widget „Tabellarische Daten“ eingefügt wird, klappt das.

    bitte um Entschuldigung, aber, das verstehe ich jetzt nicht. Ich möchte gerne das Widget "Registerkarte" nutzen, oder wie das heißt.
    Ähnlich Karteikarte... eine TABELLE ist doch etwas ganz anderes, ohne Überschriften. Es soll ja nur das dargestellt (aufgeklappt) werden, was

    der Besucher wirklich sehen will.

  • nur kurz zur Erklärung für Mitleser:

    Axel verwendet das Widget "Tabs", Stefan hat angenommen, es handele sich um eine Tabelle im Widget "Text" oder im Widget "Tabellarische Daten".


    Das eigentliche Problem werde ich mal nachbauen, später mehr dazu.

  • Haben Sie in den Tabs per Icon im Editor Tabellen eingebaut, oder wie Sind Sie genau vorgegangen, für die Preislisten? Falls die Antwort ja ist, gibt es dazu auch eine Lösung. Am Montag. Ich muss erst mal das Forum durchsuchen, das hatte ich nämlich schon mal beschrieben, man muss der Tabelle nur im Quelltext einen bestimmten Klassennamen zuweisen…

    • Neu
    • Hilfreich

    habe ich jetzt mal unter https://axel-tabs.zeta-producer.com/index.html nachgebaut (clean Style responsive). Bei den einzelnen Widgets ergibt sich folgendes Verhalten:

    • "Tabs": Bei Zusammenschieben der Seite werden die Texte automatisch runter gebrochen, wegen nicht aktivierter Silbentrennung stoppt allerdings der Umbruch ab einer bestimmten Breite, die letzte Spalte ist dann auch durch Scrollen nicht mehr erreichbar.
    • "Text" mit darin enthaltener Tabelle: Texte werden automatisch runter gebrochen, die letzte Spalte ist fast bis zum Ende komplett sichtbar, es wird aber bei Überschreiten der Sichtbarkeitsgrenze kein Scrollbalken angeboten.
    • "Tabellarische Daten": Zunächst automatischer Umbruch, ab bestimmter Seitenbreite erscheint die erste Spalte plötzlich wieder einzeilig, obwohl Umbruchmöglichkeiten durch kurze Wörter in Spalte 1 noch vorhanden sind. Es wird allerdings ein horizontaler Scrollbalken (bei Touch 2-Finger-Zoom) angezeigt.

    Alle 3 Ergebnisse sind nicht so recht zufriedenstellend.


    Änderung 1: Aktivierung der Silbentrennung in den Layouteinstellungen


    Die automatische Silbentrennung bringt keine Änderung, "Son-der-leist-ungen" oder "kunst-stoff-rähm-chen" werden nicht getrennt.


    Änderung 2: Layoutwechsel auf "simple responsive"


    keine Änderung


    Einschätzung: "Tabs" hat tatsächlich ein Darstellungsproblem mit den Inhalten der einzelnen Tabs, wenn diese Tabellen enthalten. "Text" mit integrierten Tabellen und "Tabellarische Daten" verhalten sich hingegen weitgehend responsive.


    axelwestdoerp : ich würde hier die "Tabellarischen Daten" als Vorzugsvariante sehen.

  • Hallo,


    die CSS-Klasse für die Tabelle alleine ist hier auch nicht die Lösung. Aber man kann per CSS die einzelnen Tabs so einstellen, dass Sie scrollen, wenn der Inhalt zu breit ist. Mal sehen, ob wir das generell so in das Tab-Widget einbauen. Am Montag mehr dazu…

  • Hallo nochmal,


    lassen Sie uns was versuchen. Fügen Sie bitte nachfolgendes angepasstes CSS in Ihrem Projekt ein.

    • Klicken Sie im Menü Website auf "Einstellungen"
    • Klicken Sie auf CSS
    • Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"
    CSS
    1. <style>
    2. .zpTABs table{
    3. width: 100%;
    4. max-width: 100%;
    5. border-collapse: collapse;
    6. display: block;
    7. overflow-x: auto;
    8. -webkit-overflow-scrolling: touch;
    9. }
    10. </style>


    Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

  • Hallo nochmal,


    lassen Sie uns was versuchen. Fügen Sie bitte nachfolgendes angepasstes CSS in Ihrem Projekt ein.

    • Klicken Sie im Menü Website auf "Einstellungen"
    • Klicken Sie auf CSS
    • Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"
    CSS
    1. <style>
    2. .zpTABs table{
    3. width: 100%;
    4. max-width: 100%;
    5. border-collapse: collapse;
    6. display: block;
    7. overflow-x: auto;
    8. -webkit-overflow-scrolling: touch;
    9. }
    10. </style>


    Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

    Hallo ! :-) Habe das heute umgesetzt, genau nach Anweisung :-)
    ERGEBNIS über IPHONE (im Hochformat gehalten).. mit dem Finger kann man jetzt den Inhalt des Tabs nach links
    scrollen, und den ganzen Inhalt des TABs sehen. Wie ich das allerdings für den Homepagebesucher kenntlich machen soll, weiß ich nicht,

    weil es ja recht unüblich ist, auf Mobile - Geräte noch mal nach links oder rechts zu scrollen, höchsten hoch oder runter.

    Im QUERFORMAT gehalten ist das TAB rechts abgeschnitten, obwohl der andere Inhalt das iPhone -quer-voll ausfüllt.
    Auch hier könnte ich das TAB scrollen, was aber auch hier sogar noch weniger Sinn macht.

  • Hallo,


    nach meiner Erfahrung ist das absolut nicht unüblich, sondern mittlerweile fast das Standard-Verhalten bei Tabellen auf kleinen Bildschirmen.

  • Hallo Axel

    Zitat

    Im QUERFORMAT gehalten ist das TAB rechts abgeschnitten, obwohl der andere Inhalt das iPhone -quer-voll ausfüllt.

    So wie es aussieht, hast Du dem "Tabs-Widget" nicht die volle Breite des Content, bzw. das Grid-Systems zugeteilt. Die entspr. "Class" steht bei Dir gem. m. (Kurz-)Recherche auf "11". "12" wäre die volle Breite.


    Viele Grüsse in die Welt

    elch

  • Hallo,


    nach meiner Erfahrung ist das absolut nicht unüblich, sondern mittlerweile fast das Standard-Verhalten bei Tabellen auf kleinen Bildschirmen.

    ok, wenn ich allerdings das iPhone QUER nutze, skaliert sich alles in die optimale Breite, das TAB bleibt allerdings "auf der Hälfte stehen"

  • Hallo Axel

    So wie es aussieht, hast Du dem "Tabs-Widget" nicht die volle Breite des Content, bzw. das Grid-Systems zugeteilt. Die entspr. "Class" steht bei Dir gem. m. (Kurz-)Recherche auf "11". "12" wäre die volle Breite.


    Viele Grüsse in die Welt

    elch

    ok, kann ich auch noch mal probieren

  • Hallo,


    Ursache dafür, dass nicht die volle Breite genutzt wird sind zwei Dinge:

    Erstens ist das Tab-Widget nicht auf die Volle (12-Spalten) breite aufgezogen, sondern nur auf 11 und zweitens haben Sie auf der Seite eine News-Spalte, die auf kleinen Bildschirmen bereits 50% der Breite einnimmt. Erst auf ganz kleinen Displays (Hochformat), wird auf 1-Spaltige Darstellung (News-Spalte am Ende der Site) umgeschaltet.