Unsure if this behaviour is intentional, so making an issue just in case.
dash 2.8.1
dash-bootstrap-components 1.4.0
dash-core-components 2.0.0
dash-extensions 0.0.71
- OS: Ubuntu 20.04.4 LTS
- Browser Firefox 110.0 (also tried on Chrome)
Describe the bug
I have a tab with an html.iframe. When the tab is the default active tab on startup, everything works correctly. But if the tab is not the active tab, the html in the iframe fails to load properly as things like the component height and width are zero, which are used in some code. Can/should the html.iframe component loading be deferred until it is visible, in case any contained code relies on the parent container being fully loaded? I get around this currently by only creating the html.frame when the tab is selected for the first time.
MWE not loading correctly
from dash import Dash, html, Output, Input
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.DARKLY])
app.layout= html.Div([
dbc.Tabs(
children=[
dbc.Tab(
label="test tab"
),
dbc.Tab(
html.Iframe(
src="assets/test.html",
),
label="html iframe tab",
),
]
),
]
)
if __name__ == "__main__":
app.run_server(host="127.0.0.1",debug=True, port=8052)
MWE loading correctly
from dash import Dash, html, Output, Input
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.DARKLY])
app.layout= html.Div([
dbc.Tabs(
children=[
dbc.Tab(
html.Iframe(
src="assets/test.html",
),
label="html iframe tab",
),
dbc.Tab(
label="test tab"
),
]
),
]
)
if __name__ == "__main__":
app.run_server(host="127.0.0.1",debug=True, port=8052)
Callback workaround
from dash import Dash, html, Output, Input
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.DARKLY])
app.layout= html.Div([
dbc.Tabs(
children=[
dbc.Tab(
label="test tab"
),
dbc.Tab(
label="html iframe tab",
id="html-frame-tab"
),
]
),
]
)
@app.callback(
Output("html-iframe-tab", "children"),
Input("state-tabs", "active_tab"),
State("html-iframe-tab", "children")
)
def update_html_iframe(active_tab, html_iframe):
if active_tab == "tab-1":
return html.Iframe(src="assets/test.html")
return html_iframe
if __name__ == "__main__":
app.run_server(host="127.0.0.1",debug=True, port=8052)
Expected behavior
Behaviour of the html.iframe component is the same regardless of if the parent tab is active on load.