-
Posts
-
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
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!
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,
BasilisSo 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.
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,
BasilisHi,
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,
IsmaelThanks! 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.
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,
VinayThat 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?
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)
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,
IsmaelSadly, 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;
}
}
- You must be logged in to reply to this topic.