Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #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,
    George

    #335744

    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

    #335895

    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

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