Is there a way to make the dropdown menus in Plotly responsive (whenever the screen size is decreased, the dropdown menus should reflect the change and shrink).
When I decrease the window size the boxes are displayed one on another, and some labels are shown and some are not shown:

here is a json file:
{
"Names": {
"0": "Alice",
"1": "Robert",
"2": "Garry",
"3": "Nate",
"4": "Karen",
"5": "Nick"
},
"Address": {
"0": "21 Main St",
"1": "19 Third St",
"2": "4 Church St",
"3": "5 High St",
"4": "9 Elm St",
"5": "06 Washingtom St"
},
"AreaCode": {
"0": "777",
"1": "421",
"2": "768",
"3": "345",
"4": "888",
"5": "123"
}}
here is a python code:
import pandas as pd
import plotly.graph_objects as go
import numpy as np
df_data = pd.read_json("test.json")
button_x_list = []
button_y_list = []
button_graphs_list = []
colnames = df_data.keys()
null_x = dict(
method="update",
label="",
visible=True,
args=[
{"x": ["" for _ in range(len(df_data))]},
{"xaxis": {"title": ""}},
],
)
null_y = dict(
method="update",
label="",
visible=True,
args=[
{"y": ["" for _ in range(len(df_data))]},
{"yaxis": {"title": ""}},
],
)
button_x_list.append(null_x)
button_y_list.append(null_y)
for col in colnames:
button_x_list.append(
dict(
method="update",
label=col,
visible=True,
args=[
{"x": [df_data[col]]},
{"xaxis": {"title": col}},
],
)
)
button_y_list.append(
dict(
method="update",
label=col,
visible=True,
args=[
{"y": [df_data[col]]},
{"yaxis": {"title": col}},
],
)
)
button_graphs_list.append(
dict(args=["type", "scatter"], label="Bubble", method="restyle")
)
button_graphs_list.append(
dict(args=["type", "bar"], label="Bar", method="restyle")
)
button_graphs_list.append(
dict(args=["type", "pie"], label="Pie", method="restyle")
)
button_graphs_list.append(
dict(args=["type", "histogram"], label="Histogram", method="restyle")
)
button_graphs_list.append(
dict(args=["type", "box"], label="Box", method="restyle")
)
button_x_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_x_list,
pad={"r": 15, "t": 10},
x=0.03,
y=1.08,
)
button_y_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_y_list,
pad={"r": 15, "t": 10},
x=0.23,
y=1.08,
)
button_graphs_dict = dict(
direction="down",
showactive=True,
xanchor="left",
yanchor="top",
visible=True,
buttons=button_graphs_list,
pad={"r": 15, "t": 10},
x=0.46,
y=1.08,
)
annotation_x = dict(
text="X:",
showarrow=False,
x=0,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
annotation_y = dict(
text="Y:",
showarrow=False,
x=0.2,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
annotation_graphs = dict(
text="Graph:",
showarrow=False,
x=0.4,
y=1.05,
xanchor="left",
xref="paper",
yref="paper",
align="left",
yanchor="top",
)
fig = go.Figure(
go.Scatter(x=pd.Series(dtype=object), y=pd.Series(dtype=object), mode="markers")
)
fig.update_layout(
updatemenus=[button_x_dict, button_y_dict, button_graphs_dict],
annotations=[annotation_x, annotation_y, annotation_graphs],
title="Plotly Demo",
xaxis={"title": ""},
yaxis={"title": ""}
)
fig.show()