Floating section in a web page

Dash Python
1

Hi,
I have a very lengthy web page created by Dash, well users typically scroll down the web page intensively to browse through the content. However there are some buttons that users may need to click as they scroll down the web page.

Right now the buttons are placed at the top section of web page, making it inconvenient for user to trigger them when users scrolled down the web page along the way.(users need to always move back to top section of web page and click)

Is it possible to make the “buttons” ‘float’ so they always appear in the web page no matter how much user has scrolled down?

Thanks!

Best regards

1 Like
2

Try wrapping the controls in a container with style={'position': 'absolute', 'height': 200, 'top': 0}

3

Thanks for getting back. With this style setting, the controls do “float” on top of other components. However, when i scroll the page, the controls still got scrolled up and not shown in the screen. Is there any way to make the controls “persist” in the screen even after we scroll down the page? thanks!

4

To illustrate, can look at below 2 screenshots of this page:
before scroll down the page:

image
image.png1293×491 33.7 KB

after scroll down the page:
image
image.png1375×603 30.9 KB

So the section that is circled red is the effect that i am trying to achieve: it always appear in top right of the screen no matter how much I scroll down.

Not sure if this can be achieved… thanks.

5

This can be achieved through CSS styles like the one I mentioned above (the style) property. I recommend googling for this same thing “floating div CSS” and then applying the styles to the style property (as described here: Dash HTML Components | Dash for Python Documentation | Plotly)

2 Likes
6

Manage to achieve it by specifying style as below:
style={‘position’:‘sticky’,‘top’:0}

Thanks!

4 Likes