Hi there!
I facing an issue post AWS deployment in my custom vm.Dropdown component. The list that was showing fine during windows pycharm run is distorted when deployed in AWS. Please see attached picture any idea on how to fix it or provide margin between values?
My guess is that this is happening since I am using dropdown as a custom component as dropdown on the left pane is showing just fine.
Thanks for your time!
Any errors showing in the browser developer tools console?
Hi @sumitmehta12,
Can you please share some additional information before we try to replicate the error:
Thank you,
Thanks @davidharris and @graca-n for your response!
Hi @graca-n!
I replicated the issue on windows as well so it looks like this is related to new version 0.1.19 and I am thinking it could be because of this Update optionHeight of vm.Dropdown dynamically based on character length. (#574))
Here is the screen shot from windows -
Looks like the issue is not related to AWS deployment. However my AWS setup is such that I need 0.1.19 to deploy successfully. Apologies for not providing the workable code here but this is from my app but changed the values. Let me know if this works! Thanks again for your help!
vm.Page.add_type("components", vm.Dropdown)
page = vm.Page(
title="title",
layout=vm.Layout(grid=[[0, 0], *[[2, 1]] * 6]),
components=[
vm.Dropdown(id="dd_component", title="dropdown title:",
options=[""], multi=False,
actions=[
custom function to do an action
]
),
vm.Card(id="card",
text="""
 text
""",
),
vm.Card(id="card_desc",
text="""
text description
""",
),
],
controls=[
vm.Parameter(
targets=["dd_component.options"],
selector=vm.Dropdown(title='selector title:', id="selector-id",
options=dataframe, multi=False,
value="default",
actions=[
vm.Action(
function=function(),
inputs=["selector-id.value"],
outputs=["dd_component.options"],
)
],
),
),
]
)
Thank you for the code snippet. However, I was not able to replicate the error you encountered. Below is the code I used for testing.
I added two very simple actions, so I can run the dashboard and one additional dropdown to test for long strings, but I was still unable to reproduce the bug.
Are you overwriting any parts of the Vizro Dropdown, or do you have any custom css that could affect the spacings in the Dropdown?
import vizro.models as vm
from vizro import Vizro
from vizro.models.types import capture
my_dict = {
"A": [1, 2, 3, 4, 5],
"B": [6, 7, 8, 9, 10],
"C": [11, 12, 13, 14, 15],
}
@capture("action")
def update_dd_component_options(dd_control_value):
options = my_dict[dd_control_value]
return options, options[0]
@capture("action")
def update_my_card_text(dd_component_value):
return f"Selected value: {dd_component_value}"
vm.Page.add_type("controls", vm.Dropdown)
vm.Page.add_type("components", vm.Dropdown)
page = vm.Page(
title="title",
layout=vm.Layout(
grid=[
[0, 1],
*[[2, 3]]*6
]
),
components=[
vm.Dropdown(
id="dd_component",
title="dropdown title:",
options=[1, 2, 3, 4, 5],
value=1,
multi=False,
actions=[
vm.Action(
function=update_my_card_text(),
inputs=["dd_component.value"],
outputs=["my_card_id.children"],
)
]
),
vm.Dropdown(
title="dropdown with long strings:",
options=[
"AbcAbcAb cAbcAbcAbcAb cAbcAbcAbcAbcAbcAbcAbcA bcAbcAbcAbcAbcAbcAbc AbcAbcAbcAbcAbcAbcAbcAbcAb cAbcAbcAbc AbcAbcAbcAbcAbcAbc",
"BcaBcaBcaBcaBcaBcaBc aBcaBcaBcaBcaBcaBcaBca BcaBcaBcaBcaBcaBcaBcaBcaBca BcaBcaBcaBcaBcaBcaB caBcaBcaBcaBcaBcaBcaBcaBcaBca",
"CabCabCabCabCabCabCabCab CabCabCabCa bCabCabCabCabCabCabCabCabCabCabCab CabCabCabCabCabCabCab abCabCabCabCabCabCabCabCab"
] * 10000,
multi=False,
),
vm.Card(
id="my_card_id",
text="Select a value from the dropdown",
),
vm.Card(
id="my_card_id_2",
text="Select a value from the dropdown",
),
],
controls=[
vm.Dropdown(
options=[
"AbcAbcAb cAbcAbcAbcAb cAbcAbcAbcAbcAbcAbcAbcA bcAbcAbcAbcAbcAbcAbc AbcAbcAbcAbcAbcAbcAbcAbcAb cAbcAbcAbc AbcAbcAbcAbcAbcAbc",
"BcaBcaBcaBcaBcaBcaBc aBcaBcaBcaBcaBcaBcaBca BcaBcaBcaBcaBcaBcaBcaBcaBca BcaBcaBcaBcaBcaBcaB caBcaBcaBcaBcaBcaBcaBcaBcaBca",
"CabCabCabCabCabCabCabCab CabCabCabCa bCabCabCabCabCabCabCabCabCabCabCab CabCabCabCabCabCabCab abCabCabCabCabCabCabCabCab"
] * 1000,
),
vm.Parameter(
targets=["dd_component.options"],
id="parameter",
selector=vm.Dropdown(
title='Selector title:',
id="dd_control",
options=["A", "B", "C"],
value="A",
multi=False,
actions=[
vm.Action(
function=update_dd_component_options(),
inputs=["dd_control.value"],
outputs=["dd_component.options", "dd_component.value"],
),
],
)
)
]
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
Thanks @graca-n ! Can you please try this code? You have provided the value in the options but I am passing it to the dropdown and initially it is NULL. I could replicate the issue using this code.
Please check and confirm. Thanks again!
import vizro.models as vm
from vizro import Vizro
from vizro.models.types import capture
my_dict = {
"A": [1, 2, 3, 4, 5],
"B": [6, 7, 8, 9, 10],
"C": [11, 12, 13, 14, 15],
}
@capture("action")
def update_dd_component_options(dd_control_value):
options = my_dict[dd_control_value]
return options, options[0], options, options[0]
@capture("action")
def update_my_card_text(dd_component_value):
return f"Selected value: {dd_component_value}"
vm.Page.add_type("controls", vm.Dropdown)
vm.Page.add_type("components", vm.Dropdown)
page = vm.Page(
title="title",
layout=vm.Layout(
grid=[
[0, 1],
*[[2, 3]] * 6
]
),
components=[
vm.Dropdown(
id="dd_component",
title="dropdown title:",
options=[1, 2, 3, 4, 5],
value=1,
multi=False,
actions=[
vm.Action(
function=update_my_card_text(),
inputs=["dd_component.value"],
outputs=["my_card_id.children"],
)
]
),
vm.Dropdown(
title="dropdown with long strings:",
options=[""],
multi=False,
id='dd-options-values',
value=""
),
vm.Card(
id="my_card_id",
text="Select a value from the dropdown",
),
vm.Card(
id="my_card_id_2",
text="Select a value from the dropdown",
),
],
controls=[
vm.Dropdown(
options=[
"AbcAbcAb cAbcAbcAbcAb cAbcAbcAbcAbcAbcAbcAbcA bcAbcAbcAbcAbcAbcAbc AbcAbcAbcAbcAbcAbcAbcAbcAb cAbcAbcAbc AbcAbcAbcAbcAbcAbc",
"BcaBcaBcaBcaBcaBcaBc aBcaBcaBcaBcaBcaBcaBca BcaBcaBcaBcaBcaBcaBcaBcaBca BcaBcaBcaBcaBcaBcaB caBcaBcaBcaBcaBcaBcaBcaBcaBca",
"CabCabCabCabCabCabCabCab CabCabCabCa bCabCabCabCabCabCabCabCabCabCabCab CabCabCabCabCabCabCab abCabCabCabCabCabCabCabCab"
] * 1000,
),
vm.Parameter(
targets=["dd_component.options"],
id="parameter",
selector=vm.Dropdown(
title='Selector title:',
id="dd_control",
options=["A", "B", "C"],
value="A",
multi=False,
actions=[
vm.Action(
function=update_dd_component_options(),
inputs=["dd_control.value"],
outputs=["dd_component.options", "dd_component.value","dd-options-values.options", "dd-options-values.value"],
),
],
)
)
]
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
Also on the css question, I did not have earlier and I tried using this but it did not fix the issue but I also thinking it is not causing it as well.
/* styles.css */
.dash-dropdown {
min-width: 150px,
padding: 20px 20px;
}
Hi @graca-n !
Your code gave me an idea and instead of keeping the dropdown options as [“”] (null), I passed all possible values when defining the dropdown. And now it is working 
Thanks!