Radio and Checkbox Inputs Not Working With scrollOverflow=true (On Mobile Only)

[luispoll88]

WHAT I AM USING?

I am using FullPage.js with scrollOverflow.

MY SETTINGS

These are my settings

<script>
$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		sectionsColor: ['#06C', '#C06', '#930', '#06C'],
		anchors: ['aa', 'bb', 'cc', 'dd'],
		menu: '.menu',
		navigation: true,
		scrollOverflow: false, /* True or False Depending */
		scrollBar: true,
		fixedElements: '.header',
		paddingTop: '3em',
		slidesNavigation: true,
		paddingBottom: '1em'
			});
});
</script>

PROBLEM EXPLANATION

I have a contact form that has radio and checkboxes inputs but those inputs don't work in mobile devices with scrollOverflow equals to true. They work on desktops though.

If I chancge scrollOverflow to false the inputs work on mobile but scrollOverflow does not works which is needed because the contact form is long for mobile.

LIVE EXAMPLES

You can see scrollOverflow=true (enable) on this live example 1 but radio and checkbox inputs don't work on mobile.

1. https://gramerlab.com/a1.html

On these example 2 I disabled scrollOverflow and the radio and checkbox inputs work on mobile but the scrollOverflow don't works which is bad if the contact form is long and I need to scroll.

2. https://gramerlab.com/a2.html

Does anyone knows how to fix this?

[alvarotrigo]

That's a iScroll.js issue not a fullPage.js one.
See some related topic such as:

• Submit button in form doesn't work with Iscroll
• Form elements inside a iScroll layer are not usable

Any other issues please report to iScroll.js repository.

Personally I would encourage you to get rid of scrollOverflow and use fp-auto-height-responsive together with the responsive options to turn off auto scrolling on small screen devices.

[alvarotrigo]

In any case, I've applied the proposed solution from the last comment in cubiq/iscroll#576 in the dev branch.

Please try again using the latest version in the dev branch of the scrollOveflow file (v 0.0.1) and let me know if it fixes it.

[luispoll88]

I just upload the latest version from scrollOverflow file (v 0.0.1) to this place --> https://gramerlab.com/overflow.js

And used inside this file https://gramerlab.com/a3.html

But still not working, I will check again what is going in on.

Should I also include this?

click: false
preventDefaultException: { tagName:/.*/ }

[luispoll88]

Just to confirm, I added click:false, preventDefaultException: { tagName:/.*/ }

And also added the scrollOverflow file (v 0.0.1) in here:

<script src="https://gramerlab.com/overflow.js"></script>

But the problem still remains.

<script>
$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		sectionsColor: ['#06C', '#C06', '#930', '#06C'],
		anchors: ['aa', 'bb', 'cc', 'dd'],
		menu: '.menu',
		navigation: true,
		scrollOverflow: true,
		scrollBar: true,
		fixedElements: '.header',
		paddingTop: '3em',
		slidesNavigation: true,
		paddingBottom: '1em',
		click:false, 
		preventDefaultException:{tagName:/.*/}
			});
});
</script>

[alvarotrigo]

@luispoll88 I wouldn't recommend you to play with the click option. You will suffer from unwanted issues due to bugs in iScroll.js. fullPage.js deals with that option by itself in the best possible way I found.

In any case, you should be using the iScroll options withing the scrolloverflowOptions option of fullPage.js.

$('#fullpage').fullpage({
    //other options here
    scrollOverflowOptions: {
        preventDefaultException: {
            tagName: /.*/
        }
    }
});

[luispoll88]

Confirming, it works only if I also include click:false but not without it.

Also, I am using the original scrollOverflow file, not need to use the modified file scrollOveflow file (v 0.0.1)

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/vendors/scrolloverflow.min.js"></script>

Here are my final settings:

<script>
$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		sectionsColor: ['#06C', '#C06', '#930', '#06C'],
		anchors: ['aa', 'bb', 'cc', 'dd'],
		menu: '.menu',
		navigation: true,
		scrollOverflow: true,
		scrollBar: true,
		fixedElements: '.header',
		paddingTop: '3em',
		slidesNavigation: true,
		paddingBottom: '1em',
		scrollOverflowOptions: {
			click:false,	
        	        preventDefaultException: {tagName: /.*/}
        } 
	});
});
</script>

So far I have not problems with other links inside my testings.

Tested on iPhone, Android and Kindle Devices, all of them work.

[alvarotrigo]

You should be using the latest fullPage.js version in any case. 2.9.4. Yours is quite old :D

And... just be careful when using any link in the scrollOverflow section. Those might not work on desktop or on mobile when you force a the click property to true.

[luispoll88]

How do I get the latest versions of fullpage.js?

Is there a page that I can follow for updates?

[alvarotrigo]

How do I get the latest versions of fullpage.js?

Github? Npm ? Bower? You choose :D

[luispoll88]

Yes but is my first time around Github, so I am wondering what is the right page/link I need to visit.

Is this --> https://github.com/alvarotrigo/fullPage.js/tree/master/dist

[alvarotrigo]

Yeah, but you can see the releases here:
https://github.com/alvarotrigo/fullPage.js/releases

You can also follow me on twitter.

[luispoll88]

Thanks, and the page for the scrolloverflow?

If it not too much to ask.

[alvarotrigo]

Thanks, and the page for the scrolloverflow?

In the vendors folder:
https://github.com/alvarotrigo/fullPage.js/tree/master/vendors

[luispoll88]

Gracias

[MladenJanjetovic]

This made my radio inputs work again. Thanks!

$('#fullpage').fullpage({
	scrollOverflow: true,
	scrollOverflowOptions: {
		click:false
         } 
});

[CressZZ]

This made my radio inputs work again. Thanks!

$('#fullpage').fullpage({
	scrollOverflow: true,
	scrollOverflowOptions: {
		click:false
         } 
});

I think you should add preventDefaultException: {tagName: /.*/} option.
without this option, it would be not work at IOS safari.