Same height columns/panels


#21

Thanks for that - I will give it a try :point_up:


#22

@pauland
when you use the “read more” feature the column does not change the height automatically.
One has to resize the browser window which is normal because it’s written in the script.
Is there a way to implement this in the script?


#23

I have no idea what that feature is.

I’m guessing that you’ve toggled the visibility of a bloc causing the page height to change. If the script doesn’t realise the page has changed, you may need a javascript call and there’s no way to do that in blocsapp because the visibility toggle doesn’t have an option to add a script with a functional call.


#24

Sorry Paul,
yes I meant visibility toggle.
I often use this for hide certain text or make it visible.
Well …


#25

To make it easy for others in the future (just cut and paste) :slight_smile:

<script>
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 () {
	$(".even-panel").each(function(){
		$(this).css('height',"");			// clear height values
	});
	evenpanels(".even-panel");
});

$(window).load(function () {
	evenpanels(".even-panel");
});
</script>

Thanks @pauland (and the unknown developer). The script worked for me.


#26

It appears to be from Mike Ursitti, who knows if he himself derived it from elsewhere also.

The only variant or change from what he posted in that link, being the call of the function onload.

You will also notice farther up that page, simple FlexBox solutions, @norm the Flexbox style of approach could be a simple check box via the UI, to add the class to an element.


#27

I adapted the original script so it might potentially work with multiple panels in different sections identified by a class. Should just require multiple calls to even_panels with different class ids.


#28

@pauland
I am using two separate blocs (with another bloc between them) with 3 columns in each row on the same page. When I apply the .even-panel class on all 6 columns on the two blocs/rows, I get a problem with (I think) the refresh of the columns when opening the webpage in the browser. When I adjust the width of the browser just a millimeter, the columns seems to refresh and are displayed correctly.

Is there a way to use this right on the two different blocs on the same page?

When I apply the .even-panel class to only only bloc (3 columns) everything works like it should.

Edit: After some more testing, the solution doesn’t work always 100% correct on the one bloc/row with 3 columns when loading the first time in a web browser (I tested Safari and Firefox). Get the same thing as shown on the picture. After a slightly adjustment of the browser width all columns refresh and are showed correctly. Any suggestions?


#29

Ok so in addition to the load. You simply changed it to pass an argument via a parameter into the function. Allowing users to pass their various class references inward through each function call, instead of it being hard coded in the function itself.

I overlooked that in my quick glance between the forum post and the StackOverflow post that it originally came from. Regardless, that seem to be the location for the credit you sought out to give, originally. :wink:


#30

That’s the important part.


#31

Problem solved in both blocs and rows.

I added a button in a DIV (the coders call it a “Container”) under the columns and everything seems to work without any problem now. I don’t know if this is the way it should be solved, but it’s good for me now :slight_smile:


#32

I have no idea why that should make any difference!


#33

Hi @pauland
Me neither, but now it works. I don’t have the knowledge to analyze. Have a great day!


#34

I wondered if there might be some useful tips here https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

Personally, I think we need a tick box option inside Blocs that automatically applies code.


#35

Hi chaps, I’ve tried to follow this through but I must be doing something wrong.

I have created a class .even-panels and applied it to the ROW that contains the four boxes that I want aligned.

I have cut and pasted MNL’s text (thank you!) into the Footer section of the Page Settings.

I have saved and previewed but … ta-da … nothing, nix, zero, zilch.

Should I have changed some settings in .even-panels?

Will


#36

You must apply the class to each of the boxes, not the row.
As far as I know.


#37

Correct.

It’s very hard to second-guess why something doesn’t work when there’s no code to see.


#38

Unfortunately I thought everything worked as it should be, but it didn’t. Sometimes it did, sometimes it didn’t, so stopped using this script and searched for another approach.

ROW >

IMAGE

DIV

H3
PARAGRAPH

DIV >>>>> BUTTON

This got me what I wanted.


#39

Thanks. Will try that.


#40

I have tried this on a site I am working on and all good. I the placed panels on a second page , this time with the footer option ticked. It works but does not push the footer down. Can this be cured ?

http://www.richard-lowther.com/korealive/programme.html