CSS overflow mit Folgeproblem

  • Hallo,

    als Nicht-Profi in Sachen CSS (nicht ganz dumm, aber viele Zusammenhänge fehlen mir doch) stehe ich gerade vor einem mir unerklärlichen Phänomen.

    Da auf einer bestehenden Website eine Mitgliedertabelle auf Smartphone in der Breite nicht unterzubringen ist, möchte ich diesen Bereich (<SECTION>) bei Bedarf horizontal scrollen.

    Kein Problem : overflow-x: auto.

    Hier ist der entsprechenden CSS-Teil:



    @media only screen and (max-width: 650px)

    {

    body{width: 100%}

    .

    .

    .


    section.login{

    width:100%; min-width: 280px; overflow(-x): auto;

    }

    }


    Klappt wunderbar. In allen Browsern bei jeder Breite. Also sollte es auch am Handy funktionieren.

    Denkste! Ca. nach der Hälfte der Tabelle ist Schluss mit Daten. Der Rest ist grau.

    Die Daten sind aber da! Ich kann nach versteckten Daten suchen, sie werden gefunden. Etwas deutlicher zeigt das Screenshot, bei dem ich irgendwas blind markiert habe.

    Ach ja: Das einzige Smartphone, bei alles gut ist, ist ein iPhone.


    Hat jemand eine Idee zur Problemlösung?

    Habe schon viel gegoogelt und ausprobiert, dass ich nicht mehr mitteilen kann, was alles erfolglos war. Sorry.

    Einen Link zur Seite kann ich nicht weiter geben, da dort interne Daten angezeigt werden. Aber es geht um www.chariots.de. Problem liegt hinter dem Login.


    Schon jetzt Danke für jede Antwort.

    Screenshot_20200112-163810_Chrome.jpg

  • Hey,

    wie wäre es wenn du in der mobilen Ansicht der Section die Höhe gibst damit der gesamte Inhalt angezeigt wird ?

    Hast du auch schon versucht overflow-y den Wert scroll zu geben ( overflow-y: scroll; ) ?



    Grüße,

    Stef

  • Ich verwende momentan overflow:scroll.

    Die Höhe habe ich auch schon fest vergeben. Aber die korrekte Höhe ist ja da! Nur irgendwie hinter einer grauen Wand versteckt.

    Schaue ich mir am Handy den Quellcode an (view-source: ...) ist alles. da. Auch eine Suche auf der Seite zeigt mir die Fundstelle an.

    Wie auf dem Bild zu sehen, kann ich den versteckten Text auch markieren.

    Und - wie erwähnt - das IPhone und Desktops zeigen alles an. Die Entwicklertools helfen mir deshalb auch nicht weiter.

    Android-Problem? Meine Tablets sind zum testen leider zu breit.

  • Code
    1. Die Höhe habe ich auch schon fest vergeben.

    Was heißt das? Mit einer festen Größe wie 500px? Das könnte deine Probleme erklären.

    Aber ohne den kompletten Code zu sehen ist das nur Rätselraten. Kannst Du diesen nicht posten mit Dummy-Texten statt der vertraulichen?

  • Nein. die Höhe wird jetzt wieder vom Inhalt bestimmt. War ein Test.

    Bei etwas mehr Zeit werde ich wohl mal eine Demo erstellen müssen. Könnte wetten, dass dann alles läuft ;)

  • Also bei mir auf dem Samsung S4 tritt der Fehler offenbar auf: Die Tabelle ist hinter "Name 29" abgeschnitten. Das ist doch das Problem, das Du eingangs beschrieben hast, nicht wahr?

  • Name 29 passt zu dem ursprünglichen Problem. Wenn darunter auch noch 'versteckte' Daten zu finden sind, erst recht.

    Warum zeigt mein S8 mit Android 9 im Test alles richtig an, aber nicht auf der echten Seite?

    Denke ich so falsch, wenn ich behaupte, mein Code ist OK? Vermutlich schon.

    Hab' da wohl ein echtes Problem:D

  • Zitat

    Denke ich so falsch, wenn ich behaupte, mein Code ist OK?

    Möglicher Weise ja, denn dein Code ist nicht valide: Da ist eine style-Definition mitten im HTML des body. Mir ist es zwar noch nie untergekommen, dass das ein Problem ist, aber in diesem Fall anscheinend doch: Lösche ich diese style-Sektion wird die Tabelle komplett angezeigt.

  • interessant!

    w3c validator zeigt mir keine Fehler.

    Kannst du mir genauer sagen, wo du diesen Style gefunden hast?

    Finde auf die schnelle nix. Zu viel Styles :D

  • Ich habe die komplette Url wie du validieren lassen. GRATULATION! Es wurden keine Fehler gefunden.

    Was sagt denn jetzt dein S4 dazu? S8 sagt: Alles gut

  • Stehe ratlos davor. Irgendwie scheint es so zu sein, als ob wir nicht die selbe Seite validieren lassen. Hast Du die URL ohne Dateiname genommen, wo wie ich?

    Auf meinem S4 ist die Tabelle nach wie vor abgeschnitten.

    Findest Du denn diese Style-Sektion in deiner Datei ab Zeile 40?

  • In der Tat. Ich habe den CSS-Validator genommen.

    Inzwischen wurde der Test am IPhone und einem Sony getestet. Geht!

    Und ich habe danach mal alle Fehler beseitigt. Es gibt jetzt nur noch vier Warnings.

    Da waren einige Fehler von PHP (und damit von mir) generiert drin.

    Ich werde jetzt parallel mal die O-Dateien fehlerfrei machen und staunen, was da so passiert.

  • Da sind wohl zuviele <TR> ohne </TR> rein gerutscht (von PHP generiert). Kann mir keinen anderen Grund erklären.

    Jedenfalls scheint alles zu klappen.

    Vielen Dank für die moralische und fachliche Unterstützung.

    Mache noch ein paar Tests und melde mich ggf. noch mal

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Bekon ()