Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

initial tab content not rendering #282

Closed
chriddyp opened this issue Aug 27, 2018 · 6 comments

Comments

3 participants
@chriddyp
Copy link
Member

commented Aug 27, 2018

In plotly/dash-docs#152, I updated the version of dash-core-components to include the latest tab fixes. The issue with the 2nd tab loading by default instead of the 1st has been fixed 馃帀 however it looks like there is a new issue with the tabs not loading their initial content.

See the first example here:
image

If I click through the tabs, then the content shows up:
click-through-tabs

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2018

@chriddyp That's odd - running the example by itself works fine, the content loads.

@T4rk1n

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2018

I think I got the same issue but worse. My app is divided in 4 pages, each with a dcc.Tabs containing two tab (a graph and a table). All the dcc.Tabs are contained in a div with display: none at first, they are only displayed when clicking on a link.

When I click to see the first tabs, it shows the graph and table tabs but they have no props and changing tab doesn't do anything. If I go on the next page with the other tabs, they are not there at all.

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2018

@T4rk1n Any way you could give me a reproducible example? I'm having a hard time debugging this.

@T4rk1n

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2018

Try this, it's similar to my app but this one loads the props after clicked. But the second set of tabs never show.

import dash

import dash_html_components as html
import dash_core_components as dcc
import dash_table_experiments as dte
from dash.dependencies import Output, Input
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

data = [
    {'id': 'one', 'value': 1},
    {'id': 'two', 'value': 2},
]


menu = html.Div([
    html.Div('one', id='one'),
    html.Div('two', id='two')
])

tabs_one = html.Div([
    dcc.Tabs([
        dcc.Tab(dcc.Graph(id='graph-one'), label='tab-one-one'),
        dcc.Tab(dte.DataTable(rows=[{}], id='table-one'), label='tab-one-two')
    ])
], id='tabs-one', style={'display': 'none'})

tabs_two = html.Div([
    dcc.Tabs([
        dcc.Tab(dcc.Graph(id='graph-two'), label='tab-two-one'),
        dcc.Tab(dte.DataTable(rows=[{}], id='table-two'), label='tab-two-two')
    ])
], id='tabs-two', style={'display': 'none'})


app.layout = html.Div([
    menu,
    tabs_one,
    tabs_two
])

for i in ('one', 'two'):

    @app.callback(Output('tabs-{}'.format(i), 'style'),
                  [Input(i, 'n_clicks')])
    def on_click(n_clicks):
        if n_clicks is None:
            raise PreventUpdate

        if n_clicks % 2 == 1:
            return {'display': 'block'}
        return {'display': 'none'}


    @app.callback(Output('table-{}'.format(i), 'rows'),
                  [Input(i, 'n_clicks')])
    def on_click(n_clicks):
        if n_clicks is None:
            raise PreventUpdate

        return [
            {'id': 'one', 'value': 1},
            {'id': 'two', 'value': 2},
        ]


    @app.callback(Output('graph-{}'.format(i), 'figure'),
                  [Input(i, 'n_clicks')])
    def on_click(n_clicks):
        if n_clicks is None:
            raise PreventUpdate

        return {
            'data': [
                {
                    'x': [1,2,3,4],
                    'y': [4,3,2,1]
                }
            ]
        }


if __name__ == '__main__':
    app.run_server(port=5020, debug=True)
@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2018

@T4rk1n Thanks! I think I've found the issue. :-)

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Sep 6, 2018

Published as 0.28.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.