1

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.stack.imgur.com/lgh1T.png
Boolean Switch without border-box: https://i.stack.imgur.com/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?

Bulgur
  • 25
  • 6
  • It would be helpful if you could show enough code to demonstrate the problem so we can have a better chance of helping you. I have no idea what dash_daq is, but is it not possible to set border-box just for that element? – A Haworth Feb 19 '21 at 22:31
  • Just look at the pictures with the code please! The code for a daq Boolean switch is daq.BooleanSwitch(id = 'myid', on=False) – Bulgur Feb 19 '21 at 22:34

1 Answers1

1

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;
}
aly
  • 523
  • 2
  • 7