-
AuthorPosts
-
October 12, 2014 at 5:39 am #334443
Hello,
Since the update to v3.0 & also 3.0.1 the tabular tables are no longer responsive on iPad landscape or portrait modes. Tables become responsive on smaller than iPad screens.
Tables used to work just fine up to the v3.9.2. How can I fix this issue, so the tables become responsive on the iPad the same way they used to prior to v3.0 update? and no, making it scrollable is NOT an option for my needs.
Thank you,
GeorgeOctober 14, 2014 at 9:11 pm #335744Hey George!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 989px) { .responsive div .avia_responsive_table .avia-data-table table, .responsive div .avia_responsive_table .avia-data-table tbody, .responsive div .avia_responsive_table .avia-data-table tr, .responsive div .avia_responsive_table .avia-data-table td, .responsive div .avia_responsive_table .avia-data-table th{display:block; border-top:none; border-right:none; border-left:none; text-align: center;} .responsive .avia_responsive_table .avia-data-table{border-style:solid; border-width: 1px;} .responsive .avia_responsive_table .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;} .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th{display:none;} .responsive .avia_responsive_table .avia-data-table td:before { display:block; font-style: italic; font-size: 11px; } .responsive .avia_responsive_table .avia-data-table td { position: relative; } .responsive .avia_scrollable_table { width: 100%; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .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: nowrap; } }
Cheers!
JosueOctober 15, 2014 at 3:59 am #335895Hi Josh,
Thank you very much! It now works great on iPad portrait screen. I made a small change on the code, changed media screen to 1024 size and it now also works on iPad’s landscape screen the same way it used to work before the update to v3.0.
Thank you again,
George -
AuthorPosts
- The topic ‘v3.0 – Tables NO longer responsive on iPad’ is closed to new replies.