How to overlay div components onto layout (i.e. add component without others adjusting around it)

Dash Python
1

This is probably a simple question but I can’t seem to find any docs to explain this for Dash.

If I’m building a layout (I’m currently using Dash Bootstrap’s Row and Column functions for this, but I assume the question is general), how do I add overlaid elements? In other words, how to add elements that don’t cause naerby elements to re-arrange themselves?

As an example, say I have a row of 6 buttons… is there any way I can insert a 270 deg rotated text saying “Buttons” to the left hand side of these buttons? At present, if I add, e.g.

html.Div(‘Buttons’, style={‘transform’: ‘rotate(270deg)’, ‘font-weight’:‘bold’}),

to the row, then the button positions move and I get lots of whitespace around the added text, which I don’t want.

Thanks

2

Hmm, I’ve posted two questions re. Plotly recently on this forum and looks like no discusion on either. Perhaps this was just an uninteresting question, or is there a more active community somewhere else online - e.g. on Stack Exchange?

Thanks

3

Hi @Trev123, this is not really a Plotly/dash related question but rather a web development one, which may be why you didn’t get much attention.

To do what you are asking you will need to use the ‘position’ CSS attribute.
Add 'position': 'relative' to the parent div style (your button row) and 'position': 'absolute', 'left': 0 to your ‘Buttons’ div. That should do the trick.

Hope this helps

2 Likes