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

  • 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.

  • 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.

  • Ich habe ihm die Test-URL vorgelegt:

    https://www.chariot-gospel-singers.de/test/

    und bekomme einige Fehler, u. a. den für die Style-Definition:


    Error: Element style not allowed as child of element article in this context. (Suppressing further errors from this subtree.)

    From line 40, column 1; to line 40, column 23

    ↩</aside>↩<style type='text/css'>↩.hell


    Hast Du vielleicht die CSS-Datei validieren lassen?


  • 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