Black Lives Matter. Please consider donating to Black Girls Code today.

Prepopulate a hidden div

I have a temporarily hidden div (I unhide it later with a radio button) with a dropdown in it that is populated from a callback. When the div is hidden the dropdown is not populated until I trigger the callback again but if I remove ‘display’: ‘none’ and make no other changes it populates fine. Is there a way to populate the dropdown while its hidden and have it retain its values when it’s unhidden?

I’m sorry for the vagaries but I’m a first time poster, I’d be more than happy to post some code (probably the wrong way ha ha) if it helps. But honestly the only change I’m making is removing the display: none.

Maybe try using the CSS property visibility instead, initially set to hidden, and then you can change it visible. This will still render the element, but it will not be visible, as opposed to display:none, which causes the element not to be rendered.

sadly that didn’t work but it’s likely because it’s so nested. My work around right now is to just have that selection be the default so the menu is there :slight_smile:

It might be helpful then to post as minimal an example as you can that shows this issue. Sounds like something odd could be going on.

here’s my div

html.Div([dcc.Dropdown(id=‘utility’)],id=‘elec_util’) style={‘width’: ‘250px’, ‘display’: ‘none’}),
],id=‘elec-div’),

here’s part of the callback

@app.callback(
Output(‘elec-div’, ‘children’), [Input(‘elec_input’,‘value’), Input(‘city’,‘value’)])
def electricalinputs(elec_input, city):
if elec_input == ‘Select Utility Rate Schedule’:
disp = html.Div([dcc.Dropdown(id=‘utility’)],id=‘elec_util’, style={‘width’: ‘350px’})

Sorry, I meant to say minimal working example, that can be run

1 Like