Tabs and MaterializeCSS issues

[Nemecsek]

I want to use Dash Tabs and MaterializeCSS to style the page.

1. Is there a way to set the width of each tab content? How to extend it to the whole space available?
2. Each tab content is not really responsive: after shrinking the page and widening it again, a graph is kept at its smaller size. 3.Is there an alternative CSS framework instead of MaterializeCSS that works well with Tabs?

Here is the code:

# INFO: removes numpy warnings (it complains that data length is not correct)
import warnings
warnings.filterwarnings("ignore", message="numpy.dtype size changed")
warnings.filterwarnings("ignore", message="numpy.ufunc size changed")

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

# content of each tab
content_tab1 = [
    html.Div(
        className="container",
        children=[
            html.H4("First Dash Tab"),
            html.Div(
                className="row",
                children = [
                    html.Div(
                        className="col s12 m4 l4 red yellow-text",
                        children="Test Cell 1"
                    ),
                    html.Div(
                        className="col s12 m4 l4 blue yellow-text",
                        children="Test Cell 2"
                    ),
                    html.Div(
                        className="col s12 m4 l4 green yellow-text",
                        children="Test Cell 3"
                    ),
                ]
            )
        ]
    )
]

content_tab2 = [
    html.Div(
        children=[
            dcc.Graph(
                id='example-graph2',
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [7, 2, 9], 'type': 'bar', 'name': 'AAA'},
                        {'x': [1, 2, 3], 'y': [6, 1, 5], 'type': 'bar', 'name': 'BBB'},
                        {'x': [1, 2, 3], 'y': [6, 4, 5], 'type': 'bar', 'name': 'CCC'},
                    ],
                    'layout': {
                        'title': 'Second Dash Tab'
                    }
                }
            )
        ]
    )
]

content_tab3 = [
    html.Div(
        children=[
            dcc.Graph(
                id='example-graph3',
                figure={
                    'data': [
                        {'x': [1, 2, 3], 'y': [17, 5, 19],  'type': 'bar', 'name': 'DDD'},
                        {'x': [1, 2, 3], 'y': [16, 31, 45], 'type': 'bar', 'name': 'EEE'},
                        {'x': [1, 2, 3], 'y': [46, 46, 15], 'type': 'bar', 'name': 'FFF'},
                    ],
                    'layout': {
                        'title': 'Third Dash Tab'
                    }
                }
            )
        ]
    )
]

app.layout = html.Div(
    # className="container green lighten-3",
    children = [

        html.H3('Dash Tabs demo',
            style={
                'textAlign': 'center',
                'margin': '48px 0',
                'backgroundColor':'yellow'
            }
        ),
        dcc.Tabs(
            id="tabs",
            vertical=True,
            children=[
                dcc.Tab(label='Tab 1', children=content_tab1, value=1),
                dcc.Tab(label='Tab 2', children=content_tab2, value=2),
                dcc.Tab(label='Tab 3', children=content_tab3, value=3),
            ],
            value=1,
            colors={
                "border": 'yellow',
                "primary": 'pink',
                "background": 'darkseagreen'
            },
            style={
                'backgroundColor': 'darkseagreen'
            },
            content_style={
                'border': '1px solid fuchsia',
                'padding': '44px'
            },
            parent_style={
                'maxWidth': '100%',
                'margin': '0 auto'
            }
        )
    ]
)

app.css.append_css({"external_url": "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"})
app.scripts.append_script({"external_url": "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"})

if __name__ == '__main__':
    app.run_server(debug=True)

[chriddyp]

Is there a way to set the width of each tab content? How to extend it to the whole space available?

You can customize the individaul style and classnames of each tab. See the component properties at the end of the documentation page: https://dash.plot.ly/dash-core-components/tabs. You can also read the source to see exactly how this markup is rendered: https://github.com/plotly/dash-core-components/blob/master/src/components/Tab.react.js

[Nemecsek]

@chriddyp, I gave a look but didn't find a way to set the width of a tab content to the whole screen with (minus the tabs width, of course). Are you sure it can be done? Alas my knowledge of JS is very basic and it is difficult for me to work from the source code.