Need help with styling dcc.tab component

Dash Python
1

Im not good with CSS so bare with me.

In attached picture below, I have created 3 tabs, its occupies fill length of the screen:

image
image2525×115 3.42 KB

I want the labels ‘Tab 1’ ‘Tab 2’ ‘Tab 3’ to be closer together, WITHOUT cutting off separator lines above and below the tab menu, I tried adjusting the width of each tab, but it cuts of the white lines at the right edge as show below:

image
image2509×103 2.93 KB

While, adjusting the width of dcc.tab does the trick, the white separation lines above and below are cut off at the right edge, I want it to span across the page as shown in image below. How do i do that ?

image
image2509×103 5.41 KB

Minimal reproducible example is posted below:

import dash_bootstrap_components as dbc
import dash_extensions.enrich
import base64 #image encode/decode - dcc.upload
from dash_extensions.enrich import DashProxy, Output, Input, State, Serverside, html, dcc, \
    ServersideOutputTransform, Trigger, TriggerTransform

kwargs = {
    "meta_tags": [{"name":"viewport", "content":"width=device-width, initial-scale=1, shrink-to-fit=no", "charset": "utf-8"}],
   
    "title" : "App",
    "external_stylesheets" : [dbc.themes.BOOTSTRAP]
}

app =  DashProxy(__name__,transforms=[ServersideOutputTransform(),TriggerTransform()], **kwargs)


tabs = html.Div(className='row',children=[
    dcc.Tabs(id='tab_container', value='tab_container', children=[

            dcc.Tab(label='Tab 1', value='Tab 1', children=[  
                'tab 1 content'
            ],selected_className='tab_custom_selected',className='tab_custom'),

            dcc.Tab(label='Tab 2', value='Tab 2', children=[  
                'tab 2 content'
            ],selected_className='tab_custom_selected',className='tab_custom'),
            
            dcc.Tab(label='Tab 3', value='Tab 3', children=[  
                'tab 3 content'
            ],selected_className='tab_custom_selected',className='tab_custom'),

    ],className='tab_custom_container')
])



content_panel = html.Div(className="main-panel", children=[\
    
    html.Div(id="content-panel", \
                        children=  [
                            tabs,]
                                            )])


main_panel = html.Div(className="container-fluid page-body-wrapper container-scroller", children=[content_panel])

app.layout = main_panel
if __name__ == "__main__":
    app.run_server(debug=True)

CSS code for tabs is:

body{
    background-color: blue;
}
.tab_custom_container{
    width: 40%;
}
.tab_custom {
    margin-top: 1rem;
    text-align: center !important;
    background-color: transparent !important;
    color: whitesmoke; /*text color of label*/
    /* border-top: white !important; */
    border-right: transparent !important;
    border-left: transparent !important;
    /* border-bottom: transparent !important; */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    display: flex !important;
    align-items: center;
    justify-content: left;
}

.tab_custom_selected   {

    color: whitesmoke !important; /*text color of label*/
    /* border-top: transparent !important; */
    border-top: 0.5px solid white !important;
    border-bottom: 3px solid white !important;
    font-weight: 700;
    opacity: 0.8;
}
2

Hey @ptser,

try this CSS without changing anything in your python code. Note that the width of the tabs is set to 15% of the parent, you might want to change that.

body{
    background-color: blue;
}

.tab_custom_container{
    margin-top: 1rem;
    padding: 0;
    width: 100%;
    border-top: 0.5px solid white !important;
    border-bottom: 0.5px solid white !important;
}
.tab_custom {
    width:15% !important;
    /*margin-top: 1rem;*/
    text-align: center !important;
    background-color: transparent !important;
    color: whitesmoke; /*text color of label*/
    /* border-top: white !important; */
    border-right: transparent !important;
    border-left: transparent !important;
    border-bottom: transparent !important;
    border-top: transparent !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    display: flex !important;
    align-items: center;
    justify-content: left;
}

.tab_custom_selected   {

    color: whitesmoke !important; /*text color of label*/
    /* border-top: transparent !important;
    border-top: 0.5px solid white !important;*/
    border-bottom: 3px solid white !important;
    font-weight: 700;
    opacity: 0.8;
}
1 Like