Hi,
I have a page with multiple data tables in 1/2 – 1/2 column layout elements. I set the column to equal height however it doesn’t work.
Can you assist?
Thank you!
Hey dburton77,
Thank you for the link to your site, it looks like only some of your column rows are set as equal height:
CARDBOARD ▸ CLEAN PAPER
PET ▸ HDPE
and in these the equal height is working for the columns, but the tables in the columns are not controlled by this setting so that is what you see as not equal height.
For these adding this code to the end of your child theme functions.php file in Appearance ▸ Editor will help, for this one page
function custom_equal_height_tables_script() { ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
const rows = document.querySelectorAll('.page-id-4431 .av-equal-height-column-flextable');
rows.forEach(function(row) {
const tables = row.querySelectorAll('.avia-table');
let maxHeight = 0;
tables.forEach(function(table) {
const tableHeight = table.offsetHeight;
if (tableHeight > maxHeight) {
maxHeight = tableHeight;
}
});
tables.forEach(function(table) {
table.style.height = maxHeight + 'px';
});
});
});
</script>
<?php
}
add_action( 'wp_footer', 'custom_equal_height_tables_script', 99 );
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please check your other columns so they also get the class av-equal-height-column-flextable and add this script.
Best regards,
Mike
This works perfectly! Thank you, Mike!!
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike