-
Posts
-
hi there,
i have built a template for a product page and used a custom table markup, but using the same markup and classes as the enfold data table. when it comes to responsive, enfold table is hiding the ‘avia-heading-row’ and set it as a before element for the td elements, which is not working here. it is using the css though to set everything underneath, but its not setting the before elements with the headline.
how i’am supposed to get the same responsive behaviour like i would set the table directly with enfold element? see example table in hidden field.
Hey Pixel_Production,
Thank you for the inquiry.
We can use some css to display the heading row on mobile view but it may not display how you expect it to. Please try this css code.
@media only screen and (max-width: 767px) { .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th { display: block; } }You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings. Why did you have to add the table html manually?
Best regards,
Ismaelhi Ismael,
sorry for the late response. with this code it just add back the the tr header, but its not setting the before elements. iam using a custom template for the products, thats why i cant just use the enfold shortcode here. but since its the same markup, why is it not working?
Hi,
Thank you for the update.
This is why we warned you that the changes is not going to work as you would expect it to. The heading row is rendered right above the other rows in the document, so expect it to render before the other rows on mobile view. It will not automatically render right after every other row as you would expect it to, at least not without a custom script. And the reason why it doesn’t respond like the default table shortcode is because the script (avia-table.js) that is supposed to adjust table on mobile view will only load if there is actually a table element in the page.
Another solution is to keep the default heading row hidden on mobile view and include the headers to the cells directly but you will have to repeat it for every cells. These headers can be set to only display on mobile view.
Example:
<tr> <td><span class="av-mobile-table-headers">Technische Daten</span> Schnittlänge</td> <td><span class="av-mobile-table-headers">KST-F</span> 40 x 30 mm</td> <td><span class="av-mobile-table-headers">KST-P</span> 40 x 30 mm</td> <td><span class="av-mobile-table-headers">KST-E</span> 40 x 30 mm</td> </tr>You can then add a css that will hide the av-mobile-table-headers span tag on desktop and display it on mobile view.
Best regards,
Ismaelhi Ismael,
doing it manually in every table would take too much time. but i liked your suggestion doing it myself, so i wrote a loop index to put the information into a span and its working as intended. :)
i was hoping to spare time here so i could use enfold functionality.
thanks for the help!
- The topic ‘Using Enfold Responsive Table Functionality For Own Table Markup’ is closed to new replies.