JulioWar / jw-bootstrap-switch-ng2

Bootstrap Switch for Angular 2+
https://juliowar.github.io/jw-bootstrap-switch-ng2/
MIT License
43 stars 14 forks source link

Problem initialising #1

Closed tderoo closed 7 years ago

tderoo commented 7 years ago

Have been experimenting in Chrome browser for a couple of hours and cannot get the switch to initialise directly. The buttons show up in the initial view but the state seems to be undecided (on and off both visible).

image

Have even tried to use a constant ngModel true or false with the same effect. The moment I hover the mouse over the control it suddenly initialises and jumps into the on or off view.

image

<bSwitch id="summaryOnly" [ngModel]="(state$|async).reportParam.summaryOnly" (onChangeState)="toggleShowSummaryOnly($event.currentValue)" [switch-label-width]="30" [switch-handle-width]="60" title="Run the report in summary only mode"></bSwitch>

Also the switch-label-width attribute does not seem to work the same as on the demo site http://www.bootstrap-switch.org/examples.html. Would want it to be about half the size of the label.

tderoo commented 7 years ago

The initialising issue seems to have been caused by me wrapping the bSwitch in a div that had an *ngIf attribute. The moment I turned that into a [hidden] attribute it started working. Still have no idea why that is since other input controls seem to bind normally.

The issue of the switch-label-width is still unresolved and seems to behave different from the bootstrap-switch documentation which claims.

handleWidth data-handle-width   String | Number Width of the left and right sides in pixels 'auto' or Number    'auto'
labelWidth  data-label-width    String | Number Width of the center handle in pixels    'auto' or Number    'auto'
JulioWar commented 7 years ago

Thanks @tderoo I Will Check that

JulioWar commented 7 years ago

Hello @tderoo

Before all, thanks for test my package. I fixed up the behaviour about labelWidth and handleWidth and update the README if you want to check it out.

I published the version 0.0.6 in npm.

Let me know if you need something else.

MarkDeVerno commented 6 years ago

I'm also experiencing the issue of having to hover over the toggle for it to show the correct value on initialization. My toggle, however, is not immediately in an *ngIf.

JulioWar commented 6 years ago

Hi @MarkDeVerno, Can you share something of your code ?