I have an image and a graph side by side within a tab.
The graph can have a lot of subplots, resulting in the image not being on the display anymore,
when i look at the lower subplots.
How can i fix the image in place during scrolling?
dcc.Tabs(id='tabs', children=[
dcc.Tab(label='Table',
children= [html.Table(id='output-data-upload')]), #calling the table
dcc.Tab(label='Graph',
#calling the graph
children= [html.Div([
html.Div([dcc.Graph(id='migration_data'),
#MD.save_button()
],
className= 'six columns'),
html.Div([html.Img(id='image-overlay',
style={
'height': '75%',
'width': '75%',
'float': 'right',
'position': 'relative',
'margin-top': 20,
'margin-right': 20
}),],
className='six columns'),
], className='row')]
)
]),
I tried to set the style argument of the image to {‘position’:‘fixed’}. which just results in the image not being there at all. I tried to set the style argument of the Div, that holds the image to {‘position’:‘fixed’}, but that resulted in the image being in the center of the lower edge of the screen, which 90% of its content outside the screen.
If I add the style argument ‘top’:0 it is displayed but outside of the tab.
To be clear: It is only displayed when the tab is active, but I do have items that do not belong to any tab above my tabs, and it is not displayed in the section of the tab, but above it.
How can I maintain it within the tab at a fixed position?