Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 26, 2014 at 2:09 pm #229550
    romano2

    Hello
    I’ve seen a problem in tables.
    When in smartphone view, the tables are reduced and titles are amalgamated to content. Good.
    But numbers of column’s title are not corresponding, there is a shift.

    Normal screen :
    Big table

    Reduced screen :
    Big table

    Something to to for solve this ?
    Thanx

    February 27, 2014 at 3:23 am #229882
    Devin

    Hey romano2!

    Can we see the page/example live? It should be matching up by default but inspecting the code live will let us take a closer look.

    Cheers!
    Devin

    February 27, 2014 at 10:58 am #230011
    romano2

    Yes of course :
    http://cluster013.ovh.net/~chateauh/preparer-sa-visite/
    Thanx

    March 3, 2014 at 10:19 am #231454
    Dude

    Hi!

    Please try to insert this code into the quick css field:

    
@media only screen and (max-width: 767px){
.responsive div .avia-data-table table, .responsive div .avia-data-table tbody, .responsive div .avia-data-table tr, .responsive div .avia-data-table td, .responsive div .avia-data-table th {
display: inline-grid;
}
}

    Cheers!
    Peter

    March 3, 2014 at 10:38 pm #231878
    romano2

    Thanx for answer.
    But it didn’t solve the problem of shifting content…

    March 4, 2014 at 8:38 pm #232417
    nagato

    I am also seeing this problem and trying to debug it to come up with a fix.. It makes grids really confusing when viewing them on mobile.

    I don’t think it can be fixed by CSS alone.. it looks like a bug in the data_table function around line number 254 in /config-templatebuilder/avia-shortcodes/table.php

    March 4, 2014 at 10:37 pm #232438
    nagato

    This was my solution/hack…

    /config-templatebuilder/avia-shortcodes/table.php
    line 294: 

    
$responsive_style .= ".avia-table-".self::$table_count." td:nth-of-type(" . ($counter + 1) . "):before { content: '".$row['content'][$counter]['content']."'; } ";

    And I used this custom CSS to fix the hiding/showing of headline column headers:

    @media only screen and (max-width: 767px){
.responsive .avia-data-table .avia-button-row, .responsive .avia-data-table tr:first-child th {
display: block;
}
.responsive  .avia-data-table .avia-heading-row .avia-center-col {
display: none;
}
}

    The only thing that isn’t working now is changing the label if you have multiple headline rows within a data table..

    • This reply was modified 10 years, 8 months ago by nagato. Reason: updated the line number for v2.6.1
    March 4, 2014 at 11:13 pm #232444
    romano2

    Thanx for the hack !
    It works !
    Line 282 of course

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘tables in smartphone view’ is closed to new replies.