Hi,
I have a row with two columns.
The left column generally controls the height of the row as it has a lot of text and a video.
I want the right column to be a green box, the height of which is the same as the left column (ie the green should go from the top of the left column to the bottom of the left column, on the same level as the bottom of the video).
I have set the column’s background colour but it doesn’t go all the way to the bottom of the row.
Can you help?
—Note: I tried using custom CSS to turn the entire row green, and then the left column white, but in some browsers there’s a green box around the left column. CSS used was:
#pgc-5-1-0 {
background-color: white;
}
#pg-5-1 {
background-color: #90c223;
}
I also tried fixing the height of every DIV in the column, right up to the body and the html tags! No joy.
Various other solutions were also tried.
URL: http://aidhub.org/
Hi James
Unfortunately, matching the height of 2 div elements. There are a few solutions, but none of them are particularly easy to implement.
https://css-tricks.com/fluid-width-equal-height-columns/
In the future, we’ll look at ways of making this possible within Page Builder itself, but for now it would require a fairly complex, custom solution.
Thanks for the link. I looked through it, and for other users, here’s the solution I came too. I had to change some of the code to get it to work (due to jQuery.NoConflict). The following is designed to straighten TWO sets of boxes. See below:
Somewhere in the page (used in one of the Text or Visual Editor blocks, entered in text mode):
<script type="text/javascript"> /* Thanks to CSS Tricks for pointing out this bit of jQuery http://css-tricks.com/equal-height-blocks-in-rows/ It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */ equalheight = function(container){ var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; jQuery(container).each(function() { $el = jQuery(this); jQuery($el).height('auto') topPostion = $el.position().top; if (currentRowStart != topPostion) { for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } }); } /*#p1-5 .panel-grid-cell*/ jQuery(window).load(function() { equalheight('#pg-5-1 .panel-grid-cell .panel'); equalheight('#pg-5-3 .panel-grid-cell .panel'); }); jQuery(window).resize(function(){ equalheight('#pg-5-1 .panel-grid-cell .panel'); equalheight('#pg-5-3 .panel-grid-cell .panel'); }); </script>In the CSS (I used Custom CSS, but you could edit the CSS file too):
/* works with the jQuery box height matcher */ #pg-5-1 .panel-grid-cell .panel .panel-widget-style { height: 100%; } #pg-5-3 .panel-grid-cell .panel .panel-widget-style { height: 100%; }Please note: you don’t need the line
in the page code above. Forgot to take it out.
Hi James
Really glad to hear you made progress here. CSS Tricks is an awesome site. Thanks for sharing.
All the best.
Thanks to changes in the Vantage theme, I had to make the following changes to my code, shared for anyone having the same problem (it doesn’t work any more).
By the way, to clarify, this straightens all the panels in the horizontal sections #pg-5-1 and #pg-5-3 – change those names to change which boxes are straightened (you can find this by using your browser’s Inspect Element, then find #pg-5-1 or something similar, and go from there.
<script type="text/javascript"> /* Thanks to CSS Tricks for pointing out this bit of jQuery http://css-tricks.com/equal-height-blocks-in-rows/ It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */ equalheight = function(container){ var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; jQuery(container).each(function() { $el = jQuery(this); jQuery($el).height('auto') topPostion = $el.position().top; if (currentRowStart != topPostion) { for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } }); } jQuery(window).load(function() { equalheight('#pg-5-1 .so-panel-grid-cell .panel'); equalheight('#pg-5-3 .so-panel-grid-cell .panel'); }); jQuery(window).resize(function(){ equalheight('#pg-5-1 .so-panel-grid-cell .panel'); equalheight('#pg-5-3 .so-panel-grid-cell .panel'); }); </script>and in the CSS (I used Custom CSS, but you could edit the CSS file too):
/* works with the jQuery box height matcher */ #pg-5-1 .panel-grid-cell .so-panel .panel-widget-style { height: 100%; } #pg-5-3 .panel-grid-cell .so-panel .panel-widget-style { height: 100%; }Hi James
The class name “panel” was removed as it was causing problems with other frameworks making us of the same class. That might have been the problem. Thanks for updating this thread :)
Can’t get it working :( Changed the div ids according to my setup. Nothing happened. Included the JS in footer.php. Could you help? Is the solution still up to date?
Hi Florian
Thanks for reaching out.
Sorry to hear you haven’t had any luck with this. It’s, unfortunately, beyond our support scope and well into custom development territory. If you need help on a development level we highly recommend the team over at Codeable.io.
Hi Florian,
No promises but if you tell me the specific page URL with the problem, and what exactly you are trying to make even, I will have a look at it _if_ I get a moment. You could make it a private reply if you don’t want that public.
James
Legend, thanks James.