Support » Plugin: Gutenberg Blocks - PublishPress Blocks Gutenberg Editor Plugin » View a wide Advanced Table on a mobile phone

  • Resolved melebius

    (@melebius)


    I created an Advanced Table with several columns and found that the content does not fit a mobile phone screen. If I put the same content to a basic Table block, I can slide the table horizontally using my finger to view all the columns successively but this does not work for the Advanced Table (contradicting https://wordpress.org/support/topic/tables-not-mobile-responsive/#post-12778846). The Advanced Table stays fixed when trying to slide it and keeps showing the left part of the table. What can I do to view all the columns of my Advanced Table on my mobile phone?

    My site has not got public yet but I hope you can reproduce the issue. I am using:
    WordPress 5.6
    PublishPress Blocks 2.5.0
    NanoSpace theme 1.1.8
    iOS 14.2 (tried with Safari, Firefox, and Opera Mini – all behaving the same)

    I achieved the same behavior with a narrow browser window on a PC, too.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author htmgarcia

    (@htmgarcia)

    Hi @melebius,
    is possible to have the HTML from Code editor view to see if we can reproduce the issue in our end?

    Also, does this happens when using a particular theme?
    ___
    Regards

    • This reply was modified 11 months ago by htmgarcia.
    Thread Starter melebius

    (@melebius)

    Hi @htmgarcia,

    Thanks for the reply. This is the code of my testing page:

    
    <!-- wp:paragraph -->
    <p>Vstupenky zakoupíte u&nbsp;vstupu do přednáškového stanu.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:advgb/table {"changed":true,"className":"alignleft is-style-stripes"} -->
    <table class="wp-block-advgb-table advgb-table-frontend alignleft is-style-stripes"><thead><tr><th style="text-align:left">Cena v Kč / pořad</th><th>Základní cena</th><th>Studenti, důchodci, ZTP a ZTP/P</th><th>Děti do 15&nbsp;let</th><th>test1</th><th>test1,5</th><th>test2</th></tr></thead><tbody><tr><td>Přednáška – 1,5&nbsp;hodiny</td><td>50</td><td>35</td><td>zdarma</td><td></td><td></td><td></td></tr><tr><td>Přednáška – 2&nbsp;hodiny a více</td><td>65</td><td>45</td><td>zdarma</td><td></td><td></td><td></td></tr><tr><td>Divadelní představení</td><td>100</td><td>80</td><td>50</td><td></td><td></td><td></td></tr><tr><td>Lenka Dusilová</td><td style="text-align:center" colspan="3">předprodej: 200<br>na místě: 250</td><td></td><td></td><td></td></tr><tr><td>Hradišťan</td><td style="text-align:center" colspan="3">předprodej: 390<br>na místě: 450</td><td></td><td></td><td></td></tr><tr><td>Iva Bittová</td><td style="text-align:center" colspan="3">předprodej: 290<br>na místě: 350</td><td></td><td></td><td></td></tr><tr><td>Ostatní koncerty (Oldřich Janota, Polyfonní sdružení)</td><td>100</td><td>80</td><td>zdarma</td><td></td><td></td><td></td></tr></tbody></table>
    <!-- /wp:advgb/table -->
    
    <!-- wp:paragraph -->
    <p></p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p>Ceník je rozdělen do tarifů. Nárok na zlevněný tarif prosím doložte dokladem nebo potvrzením.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:html -->
    <figure class="wp-block-table"><table>
    <thead><tr>
    <td>Cena v&nbsp;Kč / pořad</td>
    <td>Základní cena</td>
    <td>Studenti, důchodci, ZTP a ZTP/P</td>
    <td>Děti do 15&nbsp;let</td>
    </tr></thead><tbody><tr>
    <td>Přednáška – 1,5&nbsp;hodiny</td>
    <td>50</td>
    <td>35</td>
    <td>zdarma</td>
    </tr><tr>
    <td>Přednáška – 2&nbsp;hodiny a více</td>
    <td>65</td>
    <td>45</td>
    <td>zdarma</td>
    </tr><tr>
    <td>Divadelní představení</td><td>100</td><td>80</td><td>50</td></tr><tr><td>Lenka Dusilová</td><td colspan="3">předprodej: 200<br>na místě: 250</td></tr><tr><td>Hradišťan</td><td colspan="3">předprodej: 390<br>na místě: 450</td></tr><tr><td>Iva Bittová</td><td colspan="3">předprodej: 290<br>na místě: 350</td></tr><tr><td>Ostatní koncerty (Oldřich Janota, Polyfonní sdružení)</td><td>100</td><td>80</td><td>zdarma</td></tr></tbody></table></figure>
    <!-- /wp:html -->
    
    <!-- wp:table -->
    <figure class="wp-block-table"><table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table></figure>
    <!-- /wp:table -->
    

    I tried switching to the Twenty Twenty-One theme. In this case, the Advanced Table makes the whole page wider than the phone’s screen and the whole page gets horizontally slidable. The basic Table (converted to HTML to use colspan) can be still slid individually unlike the Advanced Table.

    • This reply was modified 11 months ago by melebius.
    Plugin Author htmgarcia

    (@htmgarcia)

    Thanks @melebius!

    Please try the suggestion from “Horizontal scrollbar support for Advanced Table” section: https://publishpress.com/knowledge-base/advanced-table-block/

    Thread Starter melebius

    (@melebius)

    This is not a very comfortable way (just a workaround) but it works, thank you!

    Plugin Author htmgarcia

    (@htmgarcia)

    We’re happy to help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘View a wide Advanced Table on a mobile phone’ is closed to new replies.