I am new to Dash. According to “dcc.Tabs | Dash for Python Documentation | Plotly”-- Method 2. Content as Tab Children, I created a Tabs with three tabs by using dcc.Tabs. It works fine and displays normally(the three tabs keep on the same row) on Chrome pages. But when I print it, the tabs displays in three rows. I tried to run the App on IE Edge and fireFox and style the tab-container with css, but got the same result. Could anyone help to solve the problem?
the code is as below:
‘’’
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash
app = JupyterDash(name)
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app.layout = html.Div([
dcc.Tabs([
dcc.Tab(label=‘Tab one’, children=[
dcc.Graph(
figure={
‘data’: [
{‘x’: [1, 2, 3], ‘y’: [4, 1, 2],
‘type’: ‘bar’, ‘name’: ‘SF’},
{‘x’: [1, 2, 3], ‘y’: [2, 4, 5],
‘type’: ‘bar’, ‘name’: u’Montréal’},
]
}
)
]),
dcc.Tab(label=‘Tab two’, children=[
dcc.Graph(
figure={
‘data’: [
{‘x’: [1, 2, 3], ‘y’: [1, 4, 1],
‘type’: ‘bar’, ‘name’: ‘SF’},
{‘x’: [1, 2, 3], ‘y’: [1, 2, 3],
‘type’: ‘bar’, ‘name’: u’Montréal’},
]
}
)
]),
dcc.Tab(label=‘Tab three’, children=[
dcc.Graph(
figure={
‘data’: [
{‘x’: [1, 2, 3], ‘y’: [2, 4, 3],
‘type’: ‘bar’, ‘name’: ‘SF’},
{‘x’: [1, 2, 3], ‘y’: [5, 4, 3],
‘type’: ‘bar’, ‘name’: u’Montréal’},
]
}
)
]),
])
])
app.run_server()
‘’’
