Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 22, 2021 at 11:44 am #1296005
    Pixel_Production

    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, 7 months ago by Pixel_Production. Reason: changed title to be more specific
    April 22, 2021 at 11:50 am #1296011
    Guenni007

    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

    April 22, 2021 at 12:30 pm #1296024
    Pixel_Production

    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?

    April 23, 2021 at 9:46 am #1296246
    Guenni007

    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.

    April 28, 2021 at 8:37 am #1297120
    Ismael

    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

    May 5, 2021 at 4:23 pm #1298627
    Pixel_Production

    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?

    May 5, 2021 at 4:25 pm #1298630
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

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