Canvas Support

.sticky-footer and still gap below

8 replies · opened Dec 6, 2020

SstookyDec 6, 2020

hello semicolon

although call .sticky-footer is set to the bodytag of the page, there is still a gap below the footer on big screens like 24" iMac.

rgds
guido

SSemicolon WebSTAFFDec 6, 2020

Hello,

We have tried checking this out on our 27" Screen with MacOS and there is no extra space below the Footer. We have checked this on Chrome, Firefox, and Safari with no extensions turned on. Can you please consider checking this again with the Extensions turned off and see if the issue still exists? 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.

SstookyDec 6, 2020

please check this url

http://gjd.web.my1.cc/development

and see the attached screenshot
right safari
left behind FF

in both browsers no extensions installed
firefox is virgin so to say and runs in private mode, everything is deleted when closing and when restarting the firefox.app it is like first time use.

I disbaled the pagetitle to make it more obvious.

clear to see the lighter darkgrey area beneath the copyrights footer

rgds guido

SstookyDec 6, 2020

here one more screenshot

SSemicolon WebSTAFFDec 6, 2020

Hello,

Thanks so much for the revised demo! We understand why this is happening now. This is because the Height of the Content Area is smaller than the Window Height. This will be automatically resolved if you add more content to the Content Area.

However, if you would like to force this, simply find the following line of code in the js/functions.js File inside the stickFooterOnSmall: function() Function Block:

if( !$body.hasClass('sticky-footer') && $footer.length > 0 && $wrapper.has('#footer') )

and replace it with:

if( $footer.length > 0 && $wrapper.has('#footer') )

This will definitely fix the issue. Hope this Helps!

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

SstookyDec 6, 2020

I mark all my changes with #dwcc to know what I have changed and what was original code

so now it looks like this:

		# dwcc
		# if( !$body.hasClass('sticky-footer') && $footer.length > 0 && $wrapper.has('#footer') ) {	
		if( $footer.length > 0 && $wrapper.has('#footer') ) {
			if( windowH > wrapperH ) {
				$footer.css({ 'margin-top': ( windowH - wrapperH ) });
			}
		}

page completely black :-(

http://gjd.web.my1.cc/development

SSemicolon WebSTAFFDec 6, 2020

Hello,

There are JS Errors on your Page. Your code should look like this:


stickFooterOnSmall: function(){
	$footer.css({ 'margin-top': '' });
	let windowH = $window.height(),
		wrapperH = $wrapper.height();

	if( $footer.length > 0 && $wrapper.has('#footer') ) {
		if( windowH > wrapperH ) {
			$footer.css({ 'margin-top': ( windowH - wrapperH ) });
		}
	}
}

Hope this Helps!

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

SstookyDec 6, 2020

omg it's too late again, I shall stop

in typoscript I can out-comment a line with a singhle hash as well as double slash
an beeing so used to t I simply added the hash and didn't check the bowser console

of cause your code workz perfect, stupid me :-(

thx, rgds, solved

guido

SSemicolon WebSTAFFDec 7, 2020

Hello,

:) Glad that the issues were resolved and everything working fine for now.

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