Checkout misalignment

Hello,

I have an iframe modified with CSS to hide some elements and lower the vertical dimension.
When the user clicks the donation button everything jumps out of alignment and the top of the form gets cut out of the frame.
Is there a way to avoid these misalignments?

Thanks

DonationslQgivChkoutTest.hype.zip (146.8 KB)

The HTML Widget is very misleading. It's actually an iFrame, so you end up putting an iFrame into an iFrame. I never used that element; instead, I just insert some code into innerHTML.

DonationslQgivChkoutTest-Max.hype.zip (152,2 KB)

Thank you very much, Max, for your answer.
I noticed something was strange because the widget had 2 scrollbars, so I had to insert a no-scrolling command.

Unfortunately, the problem continues with the rectangle.
The scene still jumps out of alignment when the Give button is clicked.

Just to clarify, are you referring to the content within the iframe increasing in size? If that’s the case, please note that you can’t take control over third-party content rendered inside an iframe. If you’re observing something different, it might be specific to the browser. I’ve tested this on Chrome so far.

Could you please provide more details if the issue persists or differs in other browsers?

Sorry, I meant to post this yesterday..

The issue is mainly with Chrome ( was ok in Safari) , the injected code of the iframe and the Zoom Contents as far as I can see.

Because the iframe's injected code is doing something ( not sure what ) it is affecting the parent container.

By taking the iframe element out of the group container we can stop that. But it is not perfect as the scrolling depth for the iframe element is deep.

DonationslQgivChkoutTest 2.hype.zip (151.5 KB)

1 Like

When the user clicks the Give button, the elements inside the main container shift up.
I put a red line around the container and a green background to show what is happening.
Somehow the form inside the checkout is interfering with the position of the elements.

DonationslQgivChkoutTest.hype.zip (112.7 KB)

Thank you, Max, for your help.
Taking the iframe out stops the shift.

The problem is that the container is the mask that hides the iframe before it enters the scene, so I need to keep it inside.

Maybe the fact that it is not happening in safari can give a clue of what's causing the problem.

Mark I apologize for the wrong name.
I just replied Max's post and got a little confused. :upside_down_face:

No Prob.

I do not see it before it enters the scene in the version I posted?.
But if you are just add some opacity keyframes to it

Opacity is not a solution because the elements slide into and out of the scenes, they don't just appear.

There is something weird that I have not noticed before.
I selected the rectangle with the iframe to access the inner html and the elements shifted out of alignment in the Hype window.
DonationslQgivChkoutTest.hype.zip (114.1 KB)

I haven't tracked down the exact cause, but if you change the Rectangle 3's inner html iframe's height from 750px to 100% the issue goes away, and I think behaves how you'd like:

<iframe src="https://secure.qgiv.com/for/50onetime" id="chkout50" style="border:none;height:100%;overflow:hidden" width="100%">
</iframe>

Of course making the edit will trigger the bug, so you'll need to close and reopen the document for this to work.