Same height columns/panels


Hi @calvados

I found a solution!

The middle div in the panel that is the main text area can’t be selected but it has the class name “.panel-body” so by changing the script from .even-panel to .panel-body it will stretch that middle div and push down the footer.

Cheers :nerd_face:

function evenpanels ( panelClass ) {
	var heights = [];						// make an array
	$(panelClass).each(function(){		// copy height of each
		heights.push($(this).height());		// element to the array
	heights.sort(function(a, b){return b - a});	// sort the array high to low
	var minh = heights[0];					// thake the highest number
	$(panelClass).height(minh);				// and apply that to each element
$(window).resize(function () {
		$(this).css('height',"");			// clear height values

$(window).load(function () {


Many thanks Jakerlund - for looking at it and supplying the code - I will give that go.



Works in a way. It cuts my footers off and leaves them as separate elements below the panel. Initially they are connected but changing screen widths they become disconnected.
On an iPad they are disconnected too and they go walkabout on an iPhone - disappearing below the next bloc.
I was hoping to always have my link button at the bottom of each panel. Maybe there is code/ class to anchor it to the bottom without recourse to footers. A .distance-from-bottom-0 for example ?




No worries, here’s working panels for ya :nerd_face:


Even-Panels-with-footer.bloc (207.1 KB)


Hmmm… I wonder why people are not using my Same Height bric

It covers all these problems and more !



@Bill Have you heard of the film Dumb, Dumber and Flashman? I actually tried it a few times and couldn’t get it to work…

In the end I was able to remedy this situation on panels by using custom classes with different minimum and maximum settings for width & height with bespoke settings tailored for each breakpoint. Viewing this in realtime using Solis is a great help.


Many thanks Jakerlund - I will unpick that and give it a whirl.

Bests Richard


@Bill: I’m using your bric and it works fine for me.
But - if you use a footer like in Jakerlund’s example, your bric doesn’t push the footer down to the bottom of the panel.
@Jakerlund: is it possible to use your script for different groups of panels with different heights?


If you are using the bric ‘Panel w/ head’ & then adding a button to the bottom of it, then you can just use SameHeight & apply the custom class to the paragraphs of each. Sim. to this:

If I misunderstood the problem, then please let me know.



@Bootsie the script targets all divs with that class and will set all to the same height as the tallest div with that class for any group. And since you can’t change the class for the middle div in the Panel widget you’ll have to build your panels from scratch and duplicate the script (with new class names) or add more classes into the script.

Maybe someone who is good with js script (@Bill? ) can add more classes into the original script (.panel1, .panel2, .panel3)?


OK - got it.
Let’s hope.


I don’t mean the button.
I mean the footer inside the panel. It doesn’t matter what’s inside the footer (picture, text or button.
Please have a look at Jakerlund’s example.



Yes, I looked at his example & he’s doing the same thing as my example image above. His is just a manual way of doing it, while w/ mine, if you want to add another set of panels, you can just add another custom class to the new panel paragraphs & drop in a new SameHeight. It’s much easier to use mine :wink:



I just tested @Bill’s brick and I can only say… if you need same height stuff for panels use Bill’s brick!
Apply it to the paragraphs and your done.

Need another group with different heights, just give the brick control a new class name and apply the same to all paragraphs in the new group.

If you need different colors just be creative, class for the panel, another for the heading and another for the footer.

Buttons and text in the footer will need some additional extra padding top/bottom since they won’t be the same height. (21px padding top/bottom for the green footer in my screenshot)

@Bill Do you know a way to stop it from use same heights for mobile view?

Cheers :nerd_face:


Sure I can add a breakpoint control @Jakerlund
As long as everyone will start using my stuff :wink: And maybe start donating - this stuff takes A LOT of time !!

I’ll go start looking into that, as I also had another bug fix all ready to go.



@Bill and @Jakerlund:
It’s hard to explain what my problem is.
Please have a look at the pictures.
The first is made with Jakerlund’s script and the second is Bill’s same height bric.


Hi @Bootsie

The reason for your second example behaving like that is because we set script to work on the paragraph and then you added images with different heights under the paragraph which adds additional height to the panels.
So the script does its thing on the paragraph without knowing about the images.

I made a quick solution!
Add the panel, footer, button.
Add a DIV before or after the paragraph, set a classname for that div which Bill’s script will target.
Add Bill’s brick below that DIV and set the same class name in the controller field.
(It’s can be tricky to actually select some things when they are nested in Blocs, but don’t give up)
Move the paragraph inside the div.
Add your image under the paragraph which now will be inside that extra DIV we added and now Bill’s script will expand that div regardless of how much text of what heights the images will have.

I hope that made some sense :thinking:


It makes perfectly sense.
That does the trick.

That’s how it looks in Blocs.

and here is the result in Safari

Thanks a lot Johny.
Your explanation should help many of us.


Hi @Bootsie ,

@Jakerlund’s advice is correct. I would suggest that you only need 1 SameHeight to control all three panels :wink: Otherwise you will have 3 sets of scripts running that all do the same thing 3 times, which will unnecessarily slow things down.

But otherwise, a great example.



Yeah, you’re right.
I changed it and it works perfect.