wmTipp 2018 Mobile Seite: Tabellen für mobile Ansicht anpassen

Ich habe einen Blog Artikel verfasst - Wie benutze ich die Suche richtig - Bitte diesen beachten und auch umsetzen bevor Ihr ein Neues Thema eröffnet!

  • Damit grössere Tabellen die mobile Ansicht nicht zerstören, habe ich diese bei meiner Installation scrollbar gemacht.


    Dazu enfach in der /m/css/base.css ganz unten folgendes hinzufügen:


    und in der /m/index.php ganz oben noch vor dem <?php: nach (Zeile 99)

    Code
    1. <link href="css/base.css" rel="stylesheet" type="text/css" media="screen" />

    folgendes einfügen:

    Code
    1. <script>
    2. $(document).ready(function(){
    3. $("table").wrap('<div class="table-scrollable"></div>');
    4. });
    5. </script>

    Damit wird dann jeder Tabelle die Klasse aus der base.css zugewiesen.


    Das beste Beispiel für den Effekt ist die Mitspielerübersicht (teilnehmer.ansicht.php). Ist vielleicht nicht die beste Lösung, aber zumindestens die einfachste das die mobile Ansicht nicht ganz zerstört wird.

  • Ich kann da jetzt keinen Unterschied erkennen. Was soll denn geändert sein?


    In Zeile 30 wird die header-Funktion benutzt. Der Einbau des js ganz am Anfang der Datei, führt bei mir zu einem Fehler.


    Gruß

    Carsten

  • Die Tabellen sind dann so breit wie die mobile Seite und nach rechts scrollbar, falls diese ursprünglich breiter sind.


    Ein Fehler dürfte nicht kommen, wenn du den script-Befehl vor <?php setzt.


    Was für ein Fehler kommt denn?

  • Der Fehler liegt hinter dem Banner :


    Warning: Cannot modify header information - headers already sent by (output started at /www/htdocs/xxx/wm2018/m/index.php:1) in /www/htdocs/xxx/wm2018/m/index.php on line 30


    Bei den Tabellen ist bei mir kein Unterschied zu sehen.

  • Ok, der Einfügepunkt war naturlich nicht richtig. Ich hab den Script-Befehl sonst immer direkt im jeweiligen Content gehabt und bei der index.php nicht wirklich drüber nach gedacht...

    Also den script-Befehl muss man natürlich in der index.php im Header einbauen, sonst wird dieser nicht gezogen.


    Ich hab den jetzt nach Zeile 99 in meine mobile index.php eingebaut: