Canvas Support

ajax modal not scrolling on android/chrome

5 replies · opened Jan 3, 2017

JjogjandrewJan 3, 2017

Hi,

I am loading an html into an ajax modal window. When the content in the modal is larger than the screen I need the modal to allow scrolling. By default this works in my desktop environment, but I'm unable to scroll on chrome on android-samsung s7 edge. That's the only mobile I've been able to test so far outside of emulation. By the way, the emulators I've tried all scroll by default if the content exceeds the screen size. It also works fine if I resize my desktop browser window to a mobile size.

You can test the modal function from the WORK section at the link below:

http://www.designer-made.com/website_dev/index.html

I also find that the X (close) button is sometimes partially obscured by the modal, particularly if the modal nearly or completely fills the screen. Anyway to control the position better, or put it out front?

Great template and thanks!

Best,
Andrew

JjogjandrewJan 5, 2017

Any ideas?

JjogjandrewJan 5, 2017

Safari on Iphone 6+ allows scrolling but only in conjunction with the main webpage. The result is that you can scroll the ajax modal completely off the screen, leaving only the dark tinted over main page. functional but awkward... please share ideas for better control if available.

SSemicolon WebSTAFFJan 6, 2017

Hello,

  1. Thanks for reporting this to us!

Please find all the instances of the following code inside the js/functions.js File: 

open: function() {
	$body.addClass('ohidden');
},
close: function() {
	$body.removeClass('ohidden');
}

and replace it with: 

open: function() {
	if( !$body.hasClass('device-touch') ) {
		$body.toggleClass('ohidden', true);
	}
},
close: function() {
	if( !$body.hasClass('device-touch') ) {
		$body.toggleClass('ohidden', false);
	}
}

This should definitely fix the issue with the Scrolling.

  1. Regarding the Close Button, you can consider adding the Close Button inside the Modal. Simply find the closeBtnInside: false Code in the js/functions.js File and then replace it with closeBtnInside: true .

This will definitely work fine. Hope this Helps!

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

JjogjandrewJan 8, 2017

Perfect! Both fixes work great. Thanks so much.

SSemicolon WebSTAFFJan 9, 2017

Hello,

Really Glad that your issues were resolved. Very Happy to Help! Thanks for your Patience.

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