Width is 9 px when placed in a slider (ng-bootstrap)

[Bjanski]

Hi, great plugin.

Have an issue where the slider gets a width of 9px when it's placed within a bootstrap modal.

[JulioWar]

Hi @Bjanski, Thanks!

That is strange, I am using in bootstrap modal too in my project. What library are you using to display modal with angular ?

I will test that.

[Bjanski]

@JulioWar I'm using ng2-bootstrap

[JulioWar]

@Bjanski I think you can solve the problem settting the property of switch-handle-width like this:

<bSwitch [switch-handle-width]="60"></bSwitch>

You can play with the that property and set the width of the switch that you need. That happen because the bootstrap-switch work with the width of the element when initialize and because the slider is not showing from the beginning the switch doesn't have width.

[Bjanski]

@JulioWar That solution works but is not optimal, will have a look later after work if I can provide a better solution.

[JulioWar]

@Bjanski Do you have any example or idea of the best behavior to follow in this case ? I'm working in something else right now but you can create a Pull Request if you want and I will check that later.

Thank you in advance.

[JulioWar]

I will close this issue for now. Feel free to open the issue if you have idea of best behavior and will discuss it.

[cedricremond]

Same problem here : the switch has a 0px width in a modal created with ngx-bootstrap.

The solution @JulioWar gave works but is not optimal.

[JulioWar]

Hello @Korbraan What do you think is the best solution ?

I was thinking to set a default width but that solution only work if the switch has the default values for the OFF and ON state.

for me isn't a big deal to set the width of the switch