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?
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
