This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Height of column

Open 10 replies premiumthemetheme-vantage
James Carlyle-Clarke
10 years ago · Last reply by Andrew Misplon 10 years ago

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/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Greg Priday Staff 10 years, 11 months ago

    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.

  2. James Carlyle-Clarke 10 years, 11 months ago

    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%;
}
  3. James Carlyle-Clarke 10 years, 11 months ago

    Please note: you don’t need the line

    /*#p1-5 .panel-grid-cell*/

    in the page code above. Forgot to take it out.

  4. Andrew Misplon Staff 10 years, 11 months ago

    Hi James

    Really glad to hear you made progress here. CSS Tricks is an awesome site. Thanks for sharing.

    All the best.

  5. James Carlyle-Clarke 10 years, 10 months ago

    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%;
}
  6. Andrew Misplon Staff 10 years, 10 months ago

    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 :)

  7. Florian Kall 10 years, 5 months ago

    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?

    • Andrew Misplon Staff 10 years, 5 months ago

      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.

    • James Carlyle-Clarke 10 years, 5 months ago

      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

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread