Stop underlying Parent form scrolling when scrolling through Child form

Hi, I'm making a very simple (but with many fields) 'top down' form for use on mobile phone.

One of the controls is a List control, that captures a number of additional items which are then linked to the parent form.

An issue that I have noticed is that whenever there are a lot of fields in the child form (this differs per content type), the user has to swipe down to fill out the fields. End-users have said they'd prefer this to lots of tabs or accordions (which is what I'd normally try to do here).

The issue is that the underlying parent form also scrolls down with the child form, so when the child form is closed the parent form underneath appears to be blank, or returns to the parent form in the wrong place (i.e. further down the parent form than where they were when they opened the dialog). I presume this is because the parent form does not have a fixed height?

On seeing this the user then has to swipe back up to get back to where they were on the parent form.

Is there a way I can stop the underlying parent form scrolling when a child item is opened? I can't see anything in the framework that allows me to modify this? Would I need to somehow set the parent form with CSS?

Kind regards
Andy

Hello @abolam,

A dialog window should be scrolled independently from the parent window.

Could you please share the screenshot of the form with the opened dialog window.

Do you have any code or CSS applied to the dialog?

Hi,

I have set the dialog settings as scrollable = true as it is quite lengthy and there are lots of fields to fill out:

This is (part of) the parent form (on mobile):

When I edit an item I have set the dialog width, and for it to be scrollable:

User gets to bottom of child form, and clicks Save or Cancel

The parent form has also scrolled right to the bottom of it's container form:

User has to scroll back up to top of parent form.

I figured out how to get the form to scroll back to the top once the item is saved and refresh, using a CSS class on the datatable and a change handler:

//scroll to datatable after a change

fd.control('SPDataTable1').ready().then(function(){		
	fd.control('SPDataTable1').$on('change',function(){
		var elementToJump = $('.assetScroller');
		$([document.documentElement, document.body]).
		animate({
		        scrollTop: elementToJump.offset().top
			    }, 1000);
	    fd.control('SPDataTable1').refresh();	
    });
});

However this only works on Save of the child item, if the user clicks Cancel no scrolling takes place. Is there a way to stop the parent form from scrolling at all? The parent form will always be larger than the mobile device's screen so that does need to be scrollable, but some sort of 'freeze' action on opening child dialog is needed. Hopefully this makes sense :slight_smile:

@abolam,

I couldn't reproduce the issue on my side.

Could you please share the settings for the dialog.