Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • October 12, 2014 at 5:39 am #334443
    sdbroker

    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,
    George

    October 14, 2014 at 9:11 pm #335744
    Josue

    Hey 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! 
    Josue

    October 15, 2014 at 3:59 am #335895
    sdbroker

    Hi 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

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘v3.0 – Tables NO longer responsive on iPad’ is closed to new replies.