Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1450868

    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!

    #1451377

    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

    #1451388

    This works perfectly! Thank you, Mike!!

    #1451393

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Equal height is not working for page with multiple tables and 1/2 – 1/2 columns’ is closed to new replies.