Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #668776

    Hi Enfold,

    I am trying to make a table on my page responsive and scroll when it’s too big.

    Here is the page in question (table at the bottom): http://52kards.com/product/mint2/

    See setting screenshot: http://imgur.com/a/c1jAK

    However, when I view the page on mobile the table isn’t formatted correctly and doesn’t scroll:

    See mobile screenshot: http://imgur.com/a/0eUGh

    #669111

    I am experiencing the same problem on my site. Originally (when I setup the table 6 months ago) it was working but now the contents of the table cells escape their boxes and overlap each other when viewed on a mobile device. I want the table to simply scroll sideways.

    Here is the page with non-responsive table on my site: https://theologicalresonance.com/sponsorship/

    Looking forward to the fix!

    #669146

    Hey!

    If you are having issues with tables, please try a plugin called ” TablePress “.
    It might be what you need, to achive the results you aim for.

    Please do and let us know if you still have any issues.

    Regards,
    Basilis

    #669157

    So there is no way to easily fix the bug in enfold itself? The plugin looks good but I would prefer not to turn to an additional plugin if possible. In my case, the table does generate a scroll bar at the bottom on mobile devices but because each table cell does not restrain its content the table is illegible.

    #669829

    Exactly the same thing with mine too. The scrollable option no longer works but did before!

    #669991

    Hey!

    Please can you share your web site, so we can take a look at the issue, if it is a simple CSS fix and we can suply it?

    Thanks a lot

    Regards,
    Basilis

    #670028

    Here you are:

    #671568

    Any luck finding a solution for the css?

    #671609

    Hi,

    Edit the table options, make it scrollable then add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
    .avia-table {
        min-width: 989px;
    }
    }

    Best regards,
    Ismael

    #671655

    Thanks! That almost took care of everything :)

    The table now scrolls and all of the cells are containing their contents except the description column on the far left… that one is still escaping its cells and overlapping onto the first column to the right. I tried changing it to a center text column or a default column and it is still acting the same way. Any additional tweaks?

    Overall, I’m so much happier but it would be nice to eliminate this last bug.

    #671707

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    tr th:first-child, tr td:first-child {
        word-break: break-all;
    }
    
    .avia-button.avia-size-large {
        min-width: 90px!important;
    }
    

    Best regards,
    Vinay

    • This reply was modified 8 years, 2 months ago by Vinay.
    #671999

    That doesn’t seem to fix it… All of the columns except the first “description” column on the far left side of the table appears correctly but that first column still overlaps onto the next one. Do I have to change the type of column to “center text” or “default” style?

    #672000

    Just checked my own questions by changing the “description column” to “default” but that didn’t help… since the font is no longer in bold it doesn’t overlap as much but it still runs into the next column when viewed on a mobile device.

    FYI: I replaced Ismael’s css with Vinay’s new css solution in the Quick CSS box under General Styling. The table works this way (as in it scrolls and all columns appear correctly except for the far left one)

    #673461

    Hi,

    Please add this css code:

    @media only screen and (max-width: 767px) {
    .responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td {
        white-space: normal;
    }
    
    .avia-table {
        min-width: 989px;
    }
    }

    Best regards,
    Ismael

    #673830

    Sadly, that didn’t fix it. Right now I have this code below in the Quick CSS box under General Styling and the first (far left) column of my table still overlaps onto the second column whenever the screen goes to a mobile layout.

    @media only screen and (max-width: 767px) {
    .responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td {
    white-space: normal;
    }

    .avia-table {
    min-width: 989px;
    }
    }

    #675230

    Hi,

    The white-space property is still set to nowrap instead of normal when I checked the page. Please check the css code, purge all cache, remove browser cache then hard refresh the page. Or post the login details here so that we can check the dashboard.

    Best regards,
    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.