Using `href` in dbc.Button somehow resets its CSS stye

Dash Python
1

Hello, all. I am trying to use dbc.Button’s to allow multi-page navigation my app, by utilizing the href= property that dbc.Button has (unlike html.Button which doesn’t have it).

I provide a style to all my buttons, but I noticed that using href causes some of their style properties to become lost, and I can’t find a way to prevent this change from triggering.

Is there any way to prevent whatever style changes href likes to cause to Buttons?

A screenshot of my app:

Screen Shot 2021-06-10 at 8.33.00 PM
Screen Shot 2021-06-10 at 8.33.00 PM1042×448 22.3 KB

app = dash.Dash()

button_special_style = {‘font-family’:‘copperplate’, ‘font-size’:‘20px’}

app.layout = html.Div(children=[

html.Div(children=[
    
    html.Div("My buttons:"),
            
    html.Div(id="Buttons", children=[dbc.Button("Just a plain, simply tailored button", className='regular-button', style={'font-size':'20px'}),
        
                                     dbc.Button("With style", className='stylish-button', style=button_special_style,
                                                 #href="/button1_clicked"
                                               ), 
                                                
                                     dbc.Button("Href removing some style", className='stylish-button', style=button_special_style,
                                                href="/button2_clicked"
                                               ),

                                     dbc.Button("With style", className='stylish-button', style=button_special_style,
                                                 #href="/button3_clicked"
                                               ),

                                     dbc.Button("Href removing some style", className='stylish-button', style=button_special_style,
                                                href="/button4_clicked"
                                               )
                                               ],
                                           
             style={'display':'flex',
                    'margin-top':'20px',
                    'flex':'1 0 50px'}
            ),
    
],      
         style={'border': '5px solid orange',
                'height':'200px', 'width':'500px',
                'display':'flex', 'flex-direction':'column',
                'background':'white'} 
        ),

])

if name == ‘main’:
app.run_server(debug=True)

2

Does anyone have any ideas on how href could be prevented from modifying any style attributes of dbc.Button?

3

Hi @Gon_F

Try including a Bootstrap stylesheet. For example:

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

For more information see: Quickstart - dbc docs

4

Hi AnnMarie. Thanks for the suggestion!

I am now utilizing app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]), and I can see that it strips all the fancy css styles that the buttons had before as a default.

Now all of the buttons look the exact same, which is very good, but they are now all slightly off - do you know if there is an easy way to re-apply the default style that each dbc.Button had, before href was applied to it?

Screen Shot 2021-06-13 at 7.31.22 PM
Screen Shot 2021-06-13 at 7.31.22 PM1032×468 27 KB

5

Hi @Gon_F - It looks like it is keeping the css that was defined in the style parameter, which is the font size and font family. The rest is the Bootstrap formatting and you can change that as described here: Button - dbc docs

I’m not sure what you have defined in your className='regular-button' and className='stylish-button' but those don’t look like Bootstrap classes.

6

(className='regular-button' and className='stylish-button' don’t actually point to any css, they were just set up to make the code easy to understand)

In that case, it seems what needs to be done is to re-apply the base style that dbc.Button has, since potentially dozens of little style settings have probably been lost after applying app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) and I am unsure how to get them all to revert.

Is there any way I could extract the style of a basic dbc.Button, and manually set it within the Dash app in style={}?

7

Sure - you can use the browser dev tools to inspect the button and see the CSS. Or you can look at the Bootstrap stylesheet itself. https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css

Better yet, you could select a different theme that has a style you like, then you don’t have to mess with custom CSS – plus this can help you achieve a consistent design in your app.

You can find other themes here or you can get a quick overview of the themes in dash-bootstrap-components here: Theme explorer - dbc docs