Same height columns/panels


#1

Sometimes we use panels and aesthetically it would be nice if some sets of components had the same height.

If you explicitly add a class to the panels that need all to be of equal height, then adding the script below in the page properties will cause all of the panels to have the height of the tallest panel.

In the example below I have some panels using a class for the panel set: .even-panel.

When the window is ready or resized the javascript will adjust the shorter panel sizes accordingly and all of the panels identified by the class even-panel will be at uniform height.

This is a variant of a script I located online - I would give credit for the original script if I could remember where it came from!


Same height panels Is it poss without script or java-script
NEW! Hungry Birds
#2

@pauland
Paul thanks for the script. I tried it but it doesn’t work.
I put the script in the page head code section.
I built a class like yours “.even-panel” (without quotation marks) and add it to the panels.

Is there something wrong with my script?


#3

The class is “even-panel”, add it to the footer not the header.

If that’s no good we can look again.


#4

I added it to the footer - no luck.
Did you add any heights or something in the .even-panel class?


#5

I tested the script yesterday, works fine - thank you @pauland! May be, there are wrong characters in your script, @Bootsie? Seemes to me there are quotation marks, but there have to be inch marks, I guess.


#6

Hi rainer,
did you replace the quotation marks with inch marks?
I tried it - no luck.
Something else must be wrong.


#7

I looked my script over and over again. I can’t find a mistake.
Still not workin’.


#8

Put the test website online somewhere and post a link.


#9

Please try this:
http://www.roger-evolution.de/test/test_panel/index.html


#10

Thanks for posting that.

The script has a lot of errors involving the wrong quotes characters. If you replace the quotation quotes with regular (not literary) quotes you should be good to go.

I am guessing that the reason why this has happened is that you might have used a word-processor or something to type in the code and then done a copy and paste into blocsapp. Word-processors are very helpful in that they can replace the ordinary quotation characters with the versions that slope around the quote. Sadly that changes the characters used and isn’t suitable for javascript code.


#11


#12

… and that’s exactly what I did. arrgh.
I changed the characters in Blocs and everything works fine now.
Thanks a lot Paul.


#13

It would be a cracker to adjust theses settings in Blocs.
Very helpful to arrange a clear look.


#14

Hello there,
what is exactly the reight script - please?
I fiddled arround quite a while but no suces.


#15

The right script is the one Paul posted above.
BUT:
you should type the script in the BLOCS.APP code editor, not with a normal text editor to prevent the wrong characters.


#16

@Bootsie
Do you mean in page settings?


#17

Yes. The script for the footer.


#18

Exactly. :point_up_2:


#19

So the script needs to be put in the footer section - right?


#20

Yes. Absolutely.