Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 13, 2020 at 11:29 am #1212569
    kate_ha_agency

    I’m using the equal height columns setting and have things aligned to the top, but would like to align the last element in the column (a link) to the bottom. Is there a simple way to do this? Usually I’d use flexbox but this is all set up as a table and I can’t work out if there’s a simple tweak I’m overlooking.

    May 17, 2020 at 2:52 am #1213695
    Mike

    Hey kate_ha_agency,
    Sorry for the late reply, it looks like this element is already aligned “baseline” Please explain a little more where you would like the link.

    Best regards,
    Mike

    May 18, 2020 at 10:11 am #1213965
    kate_ha_agency

    Hi Mike,

    The ‘Learn More’ links in every box should be at the bottom of the box regardless of the length of the content above. These are the last divs in the column.

    Thanks,
    Kate

    May 18, 2020 at 1:07 pm #1214012
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .flex_column_table_cell.av-equal-height-column .avia-button-left {
	position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    May 18, 2020 at 1:19 pm #1214024
    kate_ha_agency

    Unfortunately I have tried this already and it only causes it to be layered over the previous elements in the longer columns. I’d rather not use an absolute positioning method. I just want to force the last element to snap to the bottom regradless of the height of the column. For example if this was using flexbox I could set the top margin to ‘auto’. Is there an equivalent, or does this need some kind of javascript because of the way to equal height columns are set up?

    Thanks,
    Kate

    May 19, 2020 at 2:07 pm #1214337
    Mike

    Hi,
    Ok, seems like it should be simple but I’m missing something or the equal height javascript is doing something.
    So please remove the css above and add this script, it gets the height of each text section in each row and sets them the same, thus moving the button to the same place in each cell.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_height_script(){
  ?>
  <script>
(function($){
  $(window).load(function(){
  	$('.flex_column_table.av-equal-height-column-flextable').each(function(){  
     var $columns = $('section.av_textblock_section ',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_height_script');

    Then clear your browser cache and check.

    Best regards,
    Mike

    May 26, 2020 at 10:26 am #1216431
    kate_ha_agency

    Hi Mike,

    Thanks very much for this and sorry for the delayed response. It works!

    Thanks,
    Kate

    May 26, 2020 at 12:21 pm #1216466
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Align last element in equal height columns to bottom’ is closed to new replies.