I’m encountering an issue with my app’s layout where I’m trying to display an image alongside a table. My goal is to have the image span the entire width of the screen allocated to it, regardless of the table’s height. However, I’ve noticed that the size of the image seems to be somehow tied to the height of the table. As a result, when the table is short or empty, the image shrinks accordingly. I’ve experimented with adjusting margins, changing the width of the image in pixels (px fig), and even altering the actual image size, but none of these approaches seem to resolve the issue. The only noticeable difference occurs based on the aspect ratio of the image, where wider images appear larger than taller ones. What could be causing this behavior, and how can I ensure that the image always spans the full width of its allocated space regardless of the table’s height? Here is my a simple version of my code.
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
colors = {"graphBackground": "#F5F5F5", "background": "#ffffff", "text": "#000000"}
img_rgb = np.array(
[
[[255, 0, 0], [0, 255, 0], [0, 0, 255]],
[[0, 255, 0], [0, 0, 255], [255, 0, 0]],
[[0, 255, 0], [0, 0, 255], [255, 0, 0]],
[[0, 255, 0], [0, 0, 255], [255, 0, 0]],
[[0, 255, 0], [0, 0, 255], [255, 0, 0]],
[[0, 255, 0], [0, 0, 255], [255, 0, 0]],
],
dtype=np.uint8,
)
df = pd.DataFrame(columns=["A", "B", "C"])
app.layout = html.Div(
[
html.H5("Table"),
html.Div(
[
html.Div(
[
dash_table.DataTable(
df.to_dict("records"),
[{"name": i, "id": i} for i in df.columns],
),
],
style={"width": "30%", "display": "inline-block"},
),
html.Div(
[
dcc.Graph(
figure=px.imshow(
img_rgb,
title="Table ",
width=20000,
aspect="auto",
),
style={"width": "100%"},
responsive=True,
)
],
style={"width": "60%", "display": "inline-block"},
),
],
style={"display": "flex"}, # , "justify-content": "space-around"},
),
dbc.InputGroup(
[
dcc.Dropdown(
["A", "B", "C"],
id={
"type": "table_select_test",
"index": 100,
},
placeholder="Select test type",
value="",
multi=False,
clearable=False,
style={"width": 300},
),
html.Button(
"Add Row",
id={"type": "table_add_row", "index": 100},
n_clicks=0,
),
],
className="mb-3",
),
html.Hr(),
]
)
if __name__ == "__main__":
app.run_server(debug=True, processes=1, threaded=False)
The output looks like this, but I would like the image to fill the full with.
I would appreciate any help!
