Equal Height Columns

Beaver Builder
1

Hello
I have a jQuery function to create equal height columns. It looks for the parent with a class of .equal-height-genesis-cols and then sets its child columns as equal height if they have the class .widget-area

Here is a test (non-Beaver Builder) page with those classes:
http://neilmac.staging.wpengine.com/testing-coms/
All fine.

I am now trying to make that work with a Beaver Builder page.
This is my test page:
http://neilmac.staging.wpengine.com/testing-colms/

I chose a three column layout and gave it a class of equal-height-genesis-cols in the advanced section.
Then I gave the three columns inside it a class of widget-area and each a different background color.
Then I dragged in a text module into each and added text.

When that didn’t work I also tried adding the widget-area class to each text module.
Still no luck.

Can you see any way of making this work?
Many thanks.

2

Hey Neil.

Thanks for getting in touch! This is caused by the wrappers we have in place for our rows, columns and modules. Change the following on your jQuery code: .equal-height-genesis-cols to .equal-height-genesis-cols .fl-col-group and .widget-area to .widget-area .fl-col-content. Give that a shot and tell me how it goes!

Ben

3

Thanks Ben
Here is what I’ve changed as per your instructions:

jQuery('.equal-height-genesis-cols .fl-col-group').each(function() {
    	jQuery(this).children('.widget-area .fl-col-content').equalHeights(null,null,trestleEqualColsBreakpoint);
    });

But I can’t see any difference yet.

Do I need to change anything else?
Thanks

4

Hey Neil,

Sorry as I wasn’t really familiar with the .children method. Try this instead.

jQuery('.equal-height-genesis-cols .fl-col-group .widget-area').each(function() {
    	jQuery(this).children('.fl-col-content').equalHeights(null,null,trestleEqualColsBreakpoint);
});

Ben

5

Thanks Ben
I’m afraid that doesn’t seem to work either.

It’s not a deal breaker and if all else fails, I’ll just use an html module but it would be good to get it working.
Thanks
Neil

6

Hey Neil,

I copied your js file and tried it on my local. Looks like the .children method is causing it not to work. I tried this code and it works just fine.

jQuery('.equal-height-genesis-cols .fl-col-group .widget-area').each(function() {
        jQuery('.fl-col-content').equalHeights(null,null,768);
});

Take note I changed trestleEqualColsBreakpoint since I wasn’t using your theme. Try that code above first and see if it works. Then change the last bit to the breakpoint variable of your theme and see if it works as well.

Ben

7

Yep that first version looks good.
Thank you very much Ben.

8

Anytime, Neil! Enjoy The Beaver! :slight_smile:

Ben