Changing value of "visible" attribute from "visible" to "hidden" sometimes has no effect

[jps1dell]

I'm trying to implement the following behavior: Display a dropdown list of jobs. If a job is selected, display 3 tabs: "Tests", "Documents" and "Misc" each of which contains information in their "children" attributes, so for example "Tests" displays a table of test results. (I tried uploading screenshots, but got the "Something went really wrong, and we can't process that file" error.)

"Tests" and "Documents" also include "New Test" and "New Docset" buttons, respectively. When a user clicks on "New Test" I would like to hide the test results and display the form for new test data. I implemented this with a callback that changes the Style attribute for the Div that includes the test results:

# On "New Test" set style for test info panel to hidden
@app.callback(
    Output("test_info", "style"),
    [
        Input("new_test", "n_clicks")
    ],
    [
        State("jobs", "value")
    ]
)
def on_new_test03(n_clicks, job_name):
    if n_clicks != None and job_name != None:
        return html_get.get_test_info_style("hidden")

I verified that the callback is in fact being called, but the contents are not un-displayed. Instead, the new-test input form is displayed below the test results. (See second screenshot)

[chriddyp]

@jps1dell - thanks for reporting! can you post a full reproducable example? You might also want to check out the Tabs PR

[jps1dell]

Sure -- the code below should, I believe, hide Button 2 when Button 1 is pressed, and vice-versa:

import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div(
style={
'width': '80%',
'fontFamily': 'Sans-Serif',
'margin-left': 'auto',
'margin-right': 'auto'
}, id="div0",
children=[
html.Button("Hide Button 2", id="button01", disabled=False),
html.Button("Hide Button 1", id="button02", disabled=False),
]
)

@app.callback(
Output(component_id='button02', component_property='style'),
[
Input(component_id="button01", component_property="n_clicks")
]
)
def on_button01_click(n_clicks):
if (n_clicks) != None:
return {"visible" : "hidden"}

@app.callback(
Output(component_id='button01', component_property='style'),
[
Input(component_id="button02", component_property="n_clicks")
]
)
def on_button02_click(n_clicks):
if (n_clicks) != None:
return {"visible" : "hidden"}

app.run_server(debug=True)

[chriddyp]

@jps1dell {"visible" : "hidden"} isn't a valid CSS property or attribute. All of the attributes inside the style argument must refer to CSS properties (camelCased). In this case, you are probably looking for {'display': 'none'}

[jps1dell]

Ack! Duh -- thanks very much for clarifying.