Canvas Support

Overview Section - Common-height rendering fails?

11 replies · opened Sep 29, 2016

HhenriksarpSep 29, 2016

Hi there,

We would first like to thank you for the great support last time. In the meantime, we've encountered a new problem.
I will link the site in a private reply after posting this.

On the linked site, we have a section called "SECTION OVERVIEW"
With this section we've encountered it not getting the correct height when loading the page:
On the first load, and the first refresh (experienced on a 1920x1080 resolution monitor), the sections appear much larger than they are supposed to.

This we would ofcourse like a fix to. Our thoughts go to the "common-height" class, but we haven't investigated it further.

Hopefully you can come up with a solution.

Best Regards
Henrik

SSemicolon WebSTAFFSep 30, 2016

Hello,

Thank You so much for the Kind Words! Very Happy to Help! :)

We have just checked it out your Website and the Height of the Sections appear to be working fine for us on Windows 10 / Chrome at 1920x1080 Resolution. Can you please provide us with some more Information like: Browser/OS so that we can investigate this issue further and get back t you with a proper solution. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFOct 5, 2016

Hello,

Thank you so much for the Information. We have tried checking this out, however it still does not provide us with an Error. Can you please consider fixing the Validation Issues like Duplicate IDs and unclosed HTML Tags: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww-dev2.miranda.dk%2Floesning-serviceydelse%2F which might be the cause of the issue. Alternatively, please consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking: 


	jQuery(window).load( function(){
		setTimeut( function(){
			SEMICOLON.initialize.maxHeight();
		}, 800);
	});

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

HhenriksarpOct 6, 2016

Hi there,

I've fixed most of the Validation issues - however I can't see if the bears any results before next week, as the user of the large screen is away for the rest of the week.
If that doesn't fix it, I'll be trying with the JS Code described -
If we see the issue again before the JS Code is implemented / after, we will be sure to take a screenshot of it for better describing the issue.

I'll keep this topic open until we get it tested. Should we experience it again, we will ofcourse write and document with screenshots :-)

Best Regards
Henrik

HhenriksarpOct 6, 2016

Hi again,

I've just encountered the problem on a 1920x1080 screen, and I took some screenshots of the page and the code.
As you can see, the height is 432px, as it should be, on "Screenshot_11.png", but on "Screenshot_10.png" the height is 746px for some unknown reason.
I'll put in the JS Code and will report back if it made any changes.

Best Regards
Henrik

SSemicolon WebSTAFFOct 6, 2016

Hello,

Thank You so much for this thorough information! Additionally, can you please consider replacing the entire commonHeight: function( element ) Function Block in the js/functions.js File with the following code: 

commonHeight: function( element ){
	var maxHeight = 0;
	element.children('[class*=col-]').each(function() {
		var elementChild = $(this).children();
		if( elementChild.hasClass('max-height') ){
			maxHeight = elementChild.outerHeight();
		} else {
			if (elementChild.outerHeight() > maxHeight)
			maxHeight = elementChild.outerHeight();
		}
	});

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

This also might fix the issue. Let us know if we can help you with anything else or if you find any further issues.

HhenriksarpOct 10, 2016

Hi there,

As it is now, the problem has been fixed with the provided jQuery and JS code.
We thank you so much for the help.
If the problem should reoccur we will get in touch with you ASAP.

Best Regards
Henrik

SSemicolon WebSTAFFOct 12, 2016

Hello,

Really Glad that your issue was resolved!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

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