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