Search code examples
cssplotly-dashdash-bootstrap-components

dash_daq BooleanSwitch fails with border-box from Dash Bootstrap Components

I want to use a boolean switch for my Dash-Web-App. The dash_daq BooleanSwitch looks quite nice, but has a problem with the dash bootstrap components because bootstrap uses border-sizing: border-box: Boolean Switch with border-box: https://i.sstatic.net/lgh1T.png
Boolean Switch without border-box: https://i.sstatic.net/ngDgz.png

Is there any work around to use both dash_daq and Dash Bootstrap Components? Or are there other boolean switches which are compatible with Dash Bootstrap Components?

Solution

  • I was able to get around this by defining a CSS class for the the BooleanSwitch and then setting all its children to unset the box-sizing.

    In app.py:

    daq.BooleanSwitch(id = 'switch1', on=False, className = 'custom-switch')

    In your stylesheet:

    .custom-switch *{ 
    box-sizing: unset!important;
}