CSS "sticky" property not working on Bubble

Need help New Responsive Engine
1

Hi everyone!

I’m trying to add some functionalities to my timeline chart created using the Fullcalendar.io library.

The only thing I haven’t been able to do is to force the dates header to be sticky. This issue seems to appear only on Bubble. As you can see in the screenshots below, the header is not visible once scrolling past it:

image
image3707×1925 176 KB

image
image3746×1918 144 KB

While if we try to test the exact same code on Codepen, it works just fine.

image
image3741×1879 215 KB

Is there anything that changes the behaviour of sticky CSS elements in the Bubble engine? So far, I have tried:

  1. Moving the element from a reusable element to the top of the page tree.
  2. Changing the height of the HTML element (fitting it, setting it to fixed 100%, setting it to a minimum of 0 and a max of Infinite).
  3. Adding custom CSS properties to the header selector (.fc-scrollgrid-section-sticky) to force it to be sticky using “!important”.
  4. Dynamically setting the header display property to “absolute” once scrolling past it with an event listener, but this solution messes with the header position, scrolls it back to the first date and makes it difficult to use.

But none of those worked. Please note that the original code I intend to use is far more complex and contains lots of CSS and external functions, but I removed them to simplify the example. The code still behaves the same way nonetheless. It would be very important for my client to have a sticky header as it would massively help with charts that contain lots of resources.

Thanks!
~ Matteo.

2

Could you share the link to the test app? I could dive into the CSS to take a look.

My hunch is that the Bubble wrapper elements are doing something funky.

4

Sure, here’s a link to my sandbox test app.

5

I think I found it: Arc — Screen Studio

1 Like
6

That was it! Thank you so much :slight_smile:

For anyone trying to replicate this solution, just download the Classify plugin and add

{style: "overflow: visible;"}

In the “HTML” element ID attribute (Make sure you have enabled “Expose the option to add an ID attribute to HTML elements” in Settings → General), like below:

image
image606×403 15.6 KB