Hi,
I’m having trouble getting position: sticky to work for the car-rental-info element. I want it to stick to the top, but it’s not behaving as expected. I’ve checked multiple posts about similar issues and tried to avoid common mistakes, but I still can’t figure out why it isn’t working. Could someone help me out?
Thanks!
Hey there! Sticky elements can be tricky sometimes. Have you checked if there’s a parent element with overflow set to hidden or auto? That can often mess things up. Also, make sure your element has enough space to “stick” within its container. If you’ve already tried these, feel free to share more details or a snippet of your code.
I took a quick peek but I’m not seeing the element your referencing.
Can you help point me in the right direction (page/section) and/or provide a screenshot so I can take a closer look?
Hey @mikeyevin,
Apologies for the confusion. This is because I changed the class name to “form-wrapper”.
Thank you!
Hey @KarleeSellers,
I’ve seen a lot of posts regarding sticky positioning specifying that this could be the issue but to the best of my knowledge, none of its parent elements has overflow set to hidden or auto. By the way, the class of the element I wanna implement the sticky position class is now changed to “form-wrapper”
Thank you!
Very Nice Question It’s really helps me!!!
Did you set your distance from the top for the Sticky position?
The issue is due to the element not having any room to “slide” within its parent container. Even if I shrink the viewport a bit so the right column extends further down, the left column is only as tall as the content within it:
The line right below the form element is where the left column ends although the grid cell actually extends further. That means that technically at this viewport width it would have room to “stick” but the left column wrapper hasn’t been told to take up the full cell height.
If you change the left-column class to have a height of 100%, without any other adjustments, the sticky works as expected:
Thanks alot @mikeyevin
