Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1296005

    hi enfold team,

    i want to show my client two possibilites of a responsive table. the first one would be adding a scrollbar, the second one would be your responsive layout. as far as i understand on mobile the header-row gets set up as an before element of the td cell. my problem: it’s missing in column 3 and 4.

    the table is set up as a data table with standard and responsive layout. with the inspector i can see that its commented out, because the code seems to be broken or whatever.

    you have any idea why its missing?

    • This topic was modified 3 years, 8 months ago by Pixel_Production. Reason: changed title to be more specific
    #1296011

    you can follow this : https://kriesi.at/support/topic/responsive-table-not-listing-correct-row-style/

    on the bottom there is a css solution for that

    #1296024

    hi guenni,

    thanks for your answer. if i understand correctly you are adding the content via css. in my case we have a lot of tables, it would be too much work to be done manually. also, i only have one heading row, but its only showing in column 1 and 2, not 3 and 4. guess it’s more like a problem of element ifself? or maybe JS error?

    is there no other solution?

    #1296246

    You only got one heading row ? Then there must be other things that hamper that responsvie behavior.
    I guess a mod should then look at your page in the backend to find the fault.

    #1297120

    Hi,

    Thank you for the inquiry.

    The 3rd and 4th heading row is missing because for some reason, a new line is created before the closing single straight quote of the 3rd column’s content property.

    <style type="text/css">.avia-table-2 td:nth-of-type(0):before { content: 'Spezifikation'; } .avia-table-2 td:nth-of-type(1):before { content: 'SVTM1200CNC'; } .avia-table-2 td:nth-of-type(2):before { content: 'SVTM1600CNC'; } <strong>.avia-table-2 td:nth-of-type(3):before { content: 'SVTM2000CNC
    '; }</strong> .avia-table-2 td:nth-of-type(4):before { content: 'SVTM2500CNC'; } </style>
    

    The issue starts here..

    .avia-table-2 td:nth-of-type(3):before { content: 'SVTM2000CNC
    '; }
    

    To fix the issue temporarily, try to use this css code.

    @media only screen and (max-width: 767px) {
      .page-id-5788 .avia-table-2 td:nth-of-type(0):before {
        content: 'Spezifikation';
      }
    
      .page-id-5788 .avia-table-2 td:nth-of-type(1):before {
        content: 'SVTM1200CNC';
      }
    
      .page-id-5788 .avia-table-2 td:nth-of-type(2):before {
        content: 'SVTM1600CNC';
      }
    
      .page-id-5788 .avia-table-2 td:nth-of-type(3):before {
        content: 'SVTM2000CNC';
      }
    
      .page-id-5788 .avia-table-2 td:nth-of-type(4):before {
        content: 'SVTM2500CNC';
      }
    }
    

    Best regards,
    Ismael

    #1298627

    Thank you Ismael.

    My client was satisfied with scrollbar version, so there is no need for mobile version anymore.

    But still, i guess there is still an error within table file. Maybe something to fix for next update?

    Topic can be closed for now. :)

    PS: Or is there something i did wrong?

    #1298630

    Hi,

    If you need additional help please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.