Html, using <style> to add CSS elements on page

Hello members,

I have a request concerning the use of the implemented html bloc in bubble
Especially the way to implement CSS directly to the page with this mean.

For the record, I have a sidebar on my page that is a floating group, it takes up 70% of the width of the page when visible. (I can provide a self made drawing if needed).

I want to make the scrolling unable on the body of the page while my sidebar is visible.
I added this bloc:

Which makes the scrolling impossible when the element just appears visible for the first time (the first time the sidebar is visible).

But then, when the sidebar collapsed, the page still has an overflow of hidden.
I thought I could solve this by adding another bloc:


with an overflow: visible, it should allow me to scroll the page once again…

Unfortunately, I’m still unable to scroll down the page.
I tried to change the order of the 2 html blocs I showed you in the elements tree
And now it doesn’t prevent any scrolling when the sidebar is active, which makes my Overflow Hidden inexistent ?

Does anyone have any idea or any solution to help me out ?
Thanks a lot <3

Could overflow: visible !important work in this case? I’m guessing you have to override Bubble’s own overflow setting.

Thanks for your answer !
The overflow property doesn’t have problem to override bubble’s one because when I only put the hidden bloc, I cannot scroll down anymore !
(I also tried to use !important but it still doesn’t let me.

The problem isn, once the property is set, there’s no way to change it dynamically ? (apparently) by putting a bloc invisible//visible is doesn’t work but there must be another way !

Nevermind by editing the html directly when the sidebar was active I managed to override the property already in place. Now works fully !

This topic was automatically closed after 70 days. New replies are no longer allowed.