Question

Form on iOS Cuts Off Bottom and Submit Button

Forms Self-Hosted Version 11 Forms Layout Designer

Updated July 20, 2023

asked on May 2, 2023

I installed Forms Hotfix 1014447 to correct for issues with iOS 16.4.1 - so I'm now on version 11.0.2212.30996 (note that it still shows 11.0.2212.30987 in Help > About, but that was confirmed on this post as a result of a missing DLL file). So the forms are working once again on iOS.

However, I'm noticing that the bottom of the form is being cut off. I'm seeing this on my iPhone 12 running iOS 16.4.1. In Safari, it is cutting off the bottom half of the Submit button. In Chrome, it's cutting off the entire submit button. I can scroll to the point that I can see the button, but I can't actually click it because it's behind the menu at the bottom of the window.

I'm not actually certain whether or not this issue existed before installing the hotfix, because I'm only just starting to introduce public forms created in the new designer.

Has anyone else encountered this issue? Does anyone know any CSS I could add to add more margin at the bottom or something?

I did confirm that my CSS is not the cause of the issue - it still happened even when I removed all of my custom CSS on the form.

0 0

Answers

APPROVED ANSWER

replied on May 2, 2023

I ran into the same problem with my latest application (not in Forms), but for me it was worst on iPhones because the menu/address bar covered the bottom of the page.

I used CSS media queries based on a minimum screen width to add padding specifically for mobile devices and that seemed to do the trick.

You'll probably need to play with it a bit for Forms (adjust padding amount, target element, etc.), but I'd start with something like this

@media only screen and (max-width: 500px){
  .cf-formwrap {
    padding-bottom: 50px;
  }
}

1 0

replied on May 3, 2023

Excellent advice, I was going to recommend this and like the addition of the media query

0 0

replied on May 3, 2023

Thank you @████████ !

Here's what I've settled on using:

/*Temporary Workaround for iOS cutting off bottom of form and submit button.*/
@media only screen and (max-width: 500px){
  .form-container {
    margin-bottom: 80px!important;
  }
}

I'm not thrilled having to go add this to all my forms that need to be accessible on mobile, but I guess it is what it is.

0 0

SELECTED ANSWER

replied on May 3, 2023

Bug reference ID #419606. Currently looking at including a fix for it in the Forms update coming out later in the quarter.

2 0

replied on May 3, 2023

Thank you @████████ !

0 0

Replies

replied on July 19, 2023

Hi, This bug has been fixed on Forms 11 Update 4: 'Submit' and 'Save as draft' buttons show properly in Safari now

You can see other changes from:

List of Changes for Laserfiche Forms 11 Update 4 - Knowledge Base

Get Forms 11 Update 4 from Laserfiche 11 package:

Software versions and fixes included in the Laserfiche 11 Download Package - Knowledge Base

1 0

replied on July 20, 2023

Now I just gotta remember the forms I did the workaround on, haha

0 0

You are not allowed to follow up in this post.

Question

Question

Form on iOS Cuts Off Bottom and Submit Button

Answers

Replies

Sign in to reply to this post.