Sridhar Katakam

Genesis and WordPress Tutorials

How to set equal height for Content module’s element and sidebar in iThemes Builder

by 8 Comments

A friend asked in Skype today:

I want to match the heights of the white content module and the green sidebar.

Her site uses iThemes Builder Drafted child theme.

[symple_box color=”green” text_align=”left” width=”100%” float=”none”]
Even though the selectors in the code are iThemes Builder specific, the overall process remains the same and can be applied in any WordPress theme.
[/symple_box]

If there were no border or box shadow for the content module’s element, the vertically repeating 1px tall background image for content module method can be used.

But it wouldn’t work in this case.

We can use jQuery to get the height of both content’s element and sidebar, set the value of highest to a variable and set this value as the height of content’s element and sidebar.

[symple_box color=”red” text_align=”left” width=”100%” float=”none”]
Caveat: This method might cause problems when there are expanding/collapsing elements like Accordions. To work around this, you can wrap the enqueue script function call in a if conditional so it does not apply to such pages. This of course means that there will be no equal columns on such pages.
[/symple_box]

Below are the details.

Step 1

Create a file named say, equal-heights.js in /js directory under the child theme directory having this code:

jQuery(document).ready(function() {
var highestCol = Math.max(jQuery('.builder-module-content .builder-module-element').height(),jQuery('.builder-module-content .builder-module-sidebar').height());
jQuery('.builder-module-content .builder-module-element, .builder-module-content .builder-module-sidebar').height(highestCol);
});
view raw equal-heights.js hosted with ❤ by GitHub

Step 2

Add the following in child theme’s functions.php before closing PHP tag (if present):

// Enqueuing and Using Custom Javascript/Jquery for same equal height to Content module's element and sidebar
function equalheights_code() {
wp_enqueue_script( 'equalheights_script', get_stylesheet_directory_uri() . '/js/equal-heights.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'equalheights_code' );
view raw gistfile1.php hosted with ❤ by GitHub

Step 3

Refresh your site and check to see if the heights have become equal. Depending on the active theme, you may have to:

a) Remove the top and bottom padding for content module’s element (followed by adding to a div that’s inside)

b) Set a background color so that the result of above code can actually be seen.

[symple_box color=”blue” text_align=”left” width=”100%” float=”none”]
iThemes Builder Drafted specific code:


.builder-module-content .builder-module-element {
	padding-top: 0;
	padding-bottom: 0;
}

.builder-module-content .builder-module-element .loop {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.builder-module-content .builder-module-sidebar {
	background: #565C38;
}

.builder-module-content .builder-module-sidebar-outer-wrapper {
	max-width: 314px !important;  /* this value depends on sidebar width, for 1 right sidebar layouts */
    width: 314px !important; /* this value depends on sidebar width, for 1 right sidebar layouts */
}

[/symple_box]

Screencast

Watch in full screen and in 720p for a sharp video.

Source: http://stackoverflow.com/questions/3275850/set-a-div-height-equal-with-of-another-div

  • Hi Sridhar. I tried this and there was an error in the functions.php file:
    “Parse error: syntax error, unexpected T_FUNCTION”. My js file is the same name and everything is exactly as you have above.

    Reply
    • >