-
Hello Everybody,
After trying out a long time for myself, I am here in need for some help.
I’ve created a calculator on the following page: https://isolatiegids.nl/besparen/. It is a simple Grid block with a gravityform in the left column and a html widget in the right column. The htmlwidget needs to be sticky in the container, so it is always visible when filling in the form.
How can i make it happen?
– gb-grid-column gb-grid-column-7dc78615 is set to Relative
– gb-container gb-container-7dc78615 set to position Sticky.gb-grid-column-7dc78615 {
position: relative;
}.gb-container.gb-container-7dc78615 {
position: sticky;
top: 0;
z-index: 10;
}With kind regards,
Robert -
Hi there,
Any parent/ancestor of the sticky element is being set to
overflow:hiddenwill results no sticky.You have this CSS:
html, body { overflow-x: hidden; }and Elementor seems to add this CSS which doesn’t help either:
body { overflow-x: inherit !important; }Try changing your CSS to this to override the Elementor one:
html, body { overflow-x: initial !important; }And your sticky header is more than 100px in height, your
topvalue should be at least 100px instead of 0 in your sticky CSS. -
Great Ying! That solved the problem.
I am gradually moving away from Elementor. Currently, the footer and quote page is still through elementor, because you can add icons to lists quite easily there (also per list item separately). As soon as I have time I will look at how to do that properly with Generatepress. If you have any tips, please let me know.
I do see that there is now an element somewhere that provides overflow-x on the entire site. Can you see which element that is? Then I can set the overflow to hidden for that specific element.
See here: https://gyazo.com/48bdf20e6e4090b1110b68c73a179a1e
-
If you have any tips, please let me know.
With GB 2.0, you can create the list with icons easily 🙂
As for the page, I do not see an overflow issue:
https://app.screencast.com/U1jCwDIUwYcfs -
Hi,
I do see overflow here:
https://gyazo.com/157a941789eedcf52d2e2b2ff9cb8a2d -
Hi there,
that can happen on Windows Browwsers if you use the Full Width alignment option as it uses CSS to break out the container and it cannot consider the vertical scrollbar that windows puts inside the viewport ( MacOS floats the scrollbar – hence Ying not seeing it ).
Best way to resolve that is NOT use the Full Width alignment.
And instead set the pages Content Container to Full Width:https://docs.generatepress.com/article/content-container/
Then you have a full width page with no padding that you can build out how you please with GenerateBlocks
- You must be logged in to reply to this topic.