Vertical Tabs have to Right borders

Dash Python
1

Hello,
No matter what I try I can’t get my vertical tabs to have a right border.
This is my code and I have some css to style them. I’ve tried borderRight, but to no avail…Anyone having the same problem ?

    html.Div(
        [
            html.Div([
                dcc.Tabs(id="tabs-example", value='test1', vertical=True, children=[
                    dcc.Tab(label='Info1', value='test1', style=tab_style, selected_style=tab_selected_style),
                    dcc.Tab(label='Info2', value='test2', style=tab_style, selected_style=tab_selected_style),
                    dcc.Tab(label='Info3', value='test3', style=tab_style, selected_style=tab_selected_style)]
                )
            ], className='one column'),            
            html.Div(
                [
                    dt.DataTable(
                        rows=[],
                        columns=[],
                        row_selectable=True,
                        filterable=True,
                        sortable=True,
                        selected_row_indices=[],
                        id='datatable'),
                ],
                style=layout_right,
                className="six columns"
            ),
            html.Div(
                [
                    dcc.Graph(id="histogram")
                ],className="five columns")
        ], className="row"
    )
], className='twelve columns')
3

Same thing happens, but now I have two rows, but still no right borders. It’s nothing big, it just looks off and it bugs me to no end…

4

Your title says “to Right borders” but you mean “no right border” right? didn’t understand you correctly before :sweat_smile:
I had the same problem with vertical tabs! If it’s not fixed by dash you can still force it to have right border like this:
50%20PM

tab_style = {
    'borderBottom': '1px solid #d6d6d6',
    'borderTop': '1px solid #d6d6d6',
    'borderRight': '1px solid #d6d6d6',
    'borderLeft': '1px solid #d6d6d6',
    'padding': '4px 4px 0px 0px',
    'fontWeight': 'bold'
}

tab_selected_style = {
    'borderTop': '1px solid #d6d6d6',
    'borderBottom': '1px solid #d6d6d6',
    'padding': '4px'
}

app.layout = html.Div([
    dcc.Tabs(id="tabs", value='tab-1', vertical=True, children=[
        dcc.Tab(label='Tab one', value='tab-1', style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Tab two', value='tab-2', style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Tab three', value='tab-3', style=tab_style, selected_style=tab_selected_style),
    ], style={'width':200, 'padding': '0px 1px 0px 0px', 'backgroundColor':'#d6d6d6'}),
    html.Div(id='tabs-content')
])
1 Like
5

Hey thank you it works, seems like the main issue was with the dcc.Tabs ‘backgroundColor’ style. Once I changed that, the borders were visible. I would never have figured it out !
Cheers

6

Hi, just wondering, is there a way to remove the blue left border in Chrome? I googled a bit and some websites say that by adding “!important” we can remove it, but so far I haven’t been able to do so.