Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 11, 2018 at 11:31 am #955185
    johanndm

    I’m using the table widget with the following options:
    – Use the table to display tabular data
    – Minimal
    – Adjust table to screen size

    On Desktop it is displaying correct
    But on the Mobile it is not displaying all the headings?
    How do I get it to display all the headings on the mobile please?

    • This topic was modified 6 years, 6 months ago by johanndm.
    May 11, 2018 at 6:50 pm #955395
    Jordan Shannon

    Hey Johann,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    May 11, 2018 at 7:45 pm #955419
    johanndm

    Hi Jordan,

    Here you go :-)

    Thanks

    May 11, 2018 at 7:57 pm #955422
    Jordan Shannon

    Hi,

    Thanks for sending the link, but I’m not seeing the exact section provided in the screenshot. Perhaps the translation is different?

    Best regards,
    Jordan Shannon

    May 11, 2018 at 8:29 pm #955429
    johanndm

    Hello Jordan,

    Apologies – here’s the English link – it’s the 2nd table on the page.

    Thanks
    Johann

    May 11, 2018 at 8:41 pm #955431
    Jordan Shannon

    Hi,

    That’s incredibly odd. I’m not even seeing a row anywhere in the area you highlighted. It seems that there is no heading even there in the code.

    Best regards,
    Jordan Shannon

    May 11, 2018 at 8:45 pm #955432
    johanndm

    Hello Jordan,

    Yes I did some debug via UB on the mobile and I spotted that it doesn’t bring the :before over the the <td> lines, but strange the first table on the page is exactly the same, apart from the fact that it has 1 less column – so perhaps there’s something in the backend code that goes weird based on more than x columns?

    Also more strange, is if I shrink my browser page to mobile size it looks fine – it’s just when I check it on the actual mobile that it’s not working… Beats me!!

    Thanks
    Johann

    May 11, 2018 at 9:49 pm #955463
    Jordan Shannon

    Hi,

    Let me check with a few other mods for additional feedback.

    Best regards,
    Jordan Shannon

    May 12, 2018 at 6:36 am #955550
    Victoria

    Hi!

    The html is laid out in such a way that the headers are going to be a separate block on top, not in every cell line you want
    Image 2018-05-12 at 12.34.11.png

    This is why they are hidden in mobile.
    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .responsive .avia_responsive_table .avia-data-table .avia-button-row, 
    .responsive .avia_responsive_table .avia-data-table tr:first-child th {
        display: block;
    }
}

    If you need further assistance please let us know.
    Regards,
    Victoria

    May 31, 2018 at 4:39 pm #964829
    johanndm

    Hello Victoria,

    Apologies for the delayed response :-)

    I have added the css and it works perfect now thank you!!

    Thanks for the help!

    May 31, 2018 at 5:26 pm #964857
    Jordan Shannon

    Hi,

    I’m glad you got this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Table on mobile – not showing all headings’ is closed to new replies.