Modal and Safari issues

User 116462 Photo


Registered User
130 posts

Hi,
I have an issue with a contact form loaded in a Modal reveal window. It displays fine on every device I have tried so far, except Safari running Iphones. There the form does not scroll down. It gets stuck in the middle and the send button is not accessible. Is there a compatibility issue? Any way to fix this, short of not using Modal?

This is the link to my page http://www.orphelion-ensemble.com.

Kind regards
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 2699991 Photo


Registered User
5,392 posts
Online Now

we could do with seeing either your project file or the page where the trigger for the modal window is located
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 116462 Photo


Registered User
130 posts

The trigger is the fixed mail/contact button.
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5
User 244626 Photo


Registered User
811 posts

Beastro wrote:
Hi,
I have an issue with a contact form loaded in a Modal reveal window. It displays fine on every device I have tried so far, except Safari running Iphones. There the form does not scroll down. It gets stuck in the middle and the send button is not accessible. Is there a compatibility issue? Any way to fix this, short of not using Modal?

This is the link to my page http://www.orphelion-ensemble.com.

Kind regards
Berthold


I did recreate the fixed nav container html you have and found that the Modal does work with regular html, video element (has iframe), or a html element with regular html. All the tests required the user to scroll the modal container when it was fixed at the bottom and worked as it should. I was not able to fully test a Web Builder Form but think the problem may be related somehow to the form setting for the iframe of the form ? Not an area I can speak to at all so I will let others with many more years of experience and knowledge help. I do notice no scrolling is set on the form iframe however I would not have a clue where to adjust that setting.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

There may be a conflict with the touch event on iphone and the inputs on the form which would explain why the scrolling works for other content but not a form.

Try adding this additional line to Alter Eagles Reveal Repair in the Head:


<style>
/* ==== REVEAL REPAIR ==== */
body.is-reveal-open {
overflow: visible !important;
}
.reveal-overlay {
overflow: hidden;
}
html,body{
-webkit-overflow-scrolling : touch !important;
}
</style>
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,649 posts

I checked the form right now. You may have fixed it already, then I was able to scroll it.
Something you could do to make it shorter, is to make the comment text-area less high. If people write more than what fits in, they will get a scroll bar there anyway.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 116462 Photo


Registered User
130 posts

Hi again,

Yes, I guess Alter Eagles Reveal Repair must have done the trick, as it seems to work now on all devices! Thanks a lot!
I noticed that opera does not deal well with Flexbox designs. Should I care about that or is it safe as of today to design layout with flexbox?

Best regards
Berthold
Berthold, Spain
Astronomy site: http://www.astronomy.artinso.com
Musical events: http://www.orphelion-ensemble.com
ED V4, SD V5

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.