Change width of column when conditional-logic is set on another column

Beaver Themer
1

Hi, not sure if this situation is unique, but I have a row with two columns in it. Let’s say I have both columns set to 50% width. One column has text and the other has a gallery module that is populated via an ACF-Post-Field (Gallery). I can successfully hide the column with conditional-logic if the gallery field has no content. How do I get the text column to readjust to 100% width if the column for the gallery field is hidden?

2

Hi,

You can use Javascript to reset the second column’s width to 100% under condition.

  1. Set a unique class on each column to facilitate targeting, e.g. my-col-1 and my-col-2
  2. Insert the following snippet in your page: BB Tools > Layout CSS & JS
jQuery(document).ready(function($){

        var bbEdit = $('body').hasClass('fl-builder-edit');

        if( bbEdit === false && $('.my-col-1').length === 0 ) {
            $('.my-col-2').css('width', '100%');
        }
        
    });

This will reset the second column’s width to 100% if you’re not in BB Edit mode (so you can always access the first column in edit mode even if it’s empty) and if the first column is empty.

2 Likes
3

So glad I found this. I think this would be useful to have in core BT

1 Like