Canvas Support

Make 3 panels in three columns in same row all the same height

1 reply · opened Sep 23, 2016

EecurrenSep 23, 2016

Hi all,
In the attached image I have 3 panels in three different columns but all in the same row. When the text in one of the columns wraps around to the next line that panel becomes a different height than the others. I would like to have all of the panels be the same height even when one of them becomes taller than the others.

Thanks
Ed

SSemicolon WebSTAFFSep 24, 2016

Hello,

This is Definitely Possible. Please follow the Step below:

  1. Use the following HTML Code for the Panels:

	
		
			Panel heading without title
			
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, esse, velit, eaque officiis mollitia.
			
		
	
	
		
			Panel heading without title
			
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, esse, velit, eaque officiis mollitia inventore ipsum minus quo itaque provident error adipisci quisquam ratione assumenda at illo doloribus beatae totam?
			
		
	
	
		
			Panel heading without title
			
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, esse, velit, eaque officiis mollitia inventore ipsum minus quo itaque provident error adipisci quisquam ratione assumenda at illo doloribus beatae totam?
  1. Add the following JS Code in the js/functions.js File replacing the Entire commonHeight: function( element ) Function Block:
commonHeight: function( element ){
	var maxHeight = 0;
	element.children('[class*=col-]').each(function() {
		var elementChild = $(this).children();
		elementChild.css({ 'height': '' });
		if( elementChild.hasClass('max-height') ){
			maxHeight = elementChild.outerHeight();
		} else {
			if (elementChild.outerHeight() > maxHeight)
			maxHeight = elementChild.outerHeight();
		}
		elementChild.css({ 'height': '100%' });
	});

	element.children('[class*=col-]').each(function() {
		$(this).height(maxHeight);
	});
},

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard