-
AuthorPosts
-
April 22, 2021 at 11:44 am #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
April 22, 2021 at 11:50 am #1296011you 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 #1296024hi 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 #1296246You 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 #1297120Hi,
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,
IsmaelMay 5, 2021 at 4:23 pm #1298627Thank 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?
- This reply was modified 3 years, 7 months ago by Pixel_Production.
May 5, 2021 at 4:25 pm #1298630Hi,
If you need additional help please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.