Hi there,
I have tried to create a figure in a bunch of divs and wanted to set the width e.g. in relative to the width of the most inner div. What I have observed is that when I change the browser window width the figure is changing really weird.
I have written the smaller example code what I have done so far.
#! /usr/bin/python3
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
from app import app
def get_frame_placeholder(bg1: str='#00FF00', h: int=100, id_inner: str=None, width: str="33.3%",
width_inner: str="100%") -> html.Div:
return html.Div(
style={
'float': 'left',
'display': 'flex',
'justify-content': 'center',
'align-items': 'center',
'height': '{}px'.format(h),
'background-color': bg1,
'width': width,
},
children=[
html.Div(
style={
'float': 'left',
'width': width_inner,
'height': '{}px'.format(h-14),
'background-color': '#FFFFFF',
'color': '#000000',
'vertical-align': 'middle',
'text-align': 'center',
'border-radius': '5px',
'border': '1px solid #73AD21',
'display': 'flex',
'justify-content': 'center',
'align-items': 'center',
},
children=[
html.Div(
id=id_inner,
)
]
)
]
)
def get_graph_object(id_name: str, df_name: str, xs: np.ndarray, ys: np.ndarray,
xaxis_label: str='X-Axis', yaxis_label: str='Y-Axis') -> dcc.Graph:
figure_bg_average = {
'data': [
{
'x': xs,
'y': ys,
'type': 'line+markers',
'name': 'f1',
'line': {
'color': '#0000FF',
'width': 2,
},
'textposition': 'top center',
},
],
'layout': {
'title': 'Table: {df_name}'.format(df_name=df_name),
'plot_bgcolor': '#E0E0E0',
'paper_bgcolor': '#B0B0B0',
'showlegend': True,
'xaxis': {
'title': xaxis_label,
},
'yaxis': {
'range': [-1, np.max(ys)+1],
'title': yaxis_label,
},
},
}
graph_bg_average = dcc.Graph(
id=id_name,
figure=figure_bg_average,
style={
"width": "90%",
"height": "100%",
}
)
return graph_bg_average
def get_div_object() -> html.Div:
row_height = 300
div_field_nr_1 = get_frame_placeholder(bg1='#00FF0000', h=row_height, id_inner='div_test_1', width='100%')
div_field_nr_2 = get_frame_placeholder(bg1='#00FF0000', h=row_height, id_inner='div_test_2', width='100%')
combined_div_row_1 = html.Div(
className='row',
style={
'padding-top': '50px',
'padding-bottom': '25px',
'width': '60%',
'padding-left': '20%',
},
children=[
div_field_nr_1,
],
)
combined_div_row_2 = html.Div(
className='row',
style={
'padding-top': '25px',
'padding-bottom': '50px',
'width': '60%',
'padding-left': '20%',
},
children=[
div_field_nr_2,
],
)
xs1 = np.array([0, 1, 2])
ys1 = np.array([3, 6, 10])
fig_1 = get_graph_object('id_fig_1', 'Test graph with 105% (> 100%) width', xs1, ys1)
fig_1.style = {
# absolute values e.g. in px are working! No problems.
'width': '105%', # <-- this is making problems!!! Figure is getting wider!
'height': '{}px'.format(row_height-30)
}
fig_1.figure['layout']['margin'] = {'l': 40, 'b': 40, 't': 30, 'r': 10}
inner_div_1 = div_field_nr_1.children[0].children[0]
inner_div_1.children = fig_1
xs2 = np.array([1, 2, 3, 4])
ys2 = np.array([8, 2, 9, 5])
fig_2 = get_graph_object('id_fig_2', 'Test graph with 95% (< 100%) width', xs2, ys2)
fig_2.style = {
# absolute values e.g. in px are working! No problems.
'width': '95%', # <-- this is making problems!!! Figure is getting narrower!
'height': '{}px'.format(row_height-30)
}
fig_2.figure['layout']['margin'] = {'l': 40, 'b': 40, 't': 30, 'r': 10}
inner_div_2 = div_field_nr_2.children[0].children[0]
inner_div_2.children = fig_2
return html.Div(className="row", children=[combined_div_row_1, combined_div_row_2])
app.layout = html.Div(
className='row',
style={
'display': 'block',
'background-color': '#FFFFFF',
},
children=[get_div_object()]
)
if __name__ == '__main__':
app.run_server(debug=True, host="127.0.0.1", port="12345")
Also you can see from the gif image that the figures are changing in the opposite direction. Instead of getting more narrow for the first figure with the width 105% it is getting broader. Vice versa too.
If this problem is already know, please let me know. Otherwise I do not know how to fix this type of bug right now.