Bug display

[Devlop-er]

Hi I know an issue has been opened and closed already but I get the same bug,

The stylesheet is linked and here is my code :

<div class="field"> <input id="switchRoundedDefault" type="checkbox" name="switchRoundedDefault" class="switch is-rounded" checked="checked"> <label for="switchRoundedDefault">Switch rounded default</label> </div>

What's the problem thanks ^^

[Wikiki]

Hi,

On which browser are you working ?

[Devlop-er]

I'm using Chrome(latest version)

[cwise]

Same issue

<div class="field">
  <input id="show_identifiers" type="checkbox" name="show_identifiers" class="switch is-rtl is-rounded">
  <label for="show_identifiers">Show Identifiers</label>
</div>

[ddreier]

Same thing here, FWIW. Just downloaded bulma-switch, using bulma v0.7.4 and Chrome v73.

[Wikiki]

I'll have a look on it and I'll keep you in touch.

[campZero]

Can confirm, using Firefox 66.0.3 (64bit) and bulma 0.7.4

[LucentDread]

Same issue here on Chrome

[LucentDread]

I resolved it by renaming the .min.css file to .css. Don't know why though.

[alevv]

same problem here, anyone figured it out? I used both Chrome and Safari

[okas]

Same problem. Chrome 74.0.3729.108 (Build oficial) (64 bits)

[solomon77]

same problem.
fixed it this way.

index.sass L14:L16

$paddle-height: calc($switch-height - ($switch-paddle-offset * 2))
$paddle-width: calc($switch-height - ($switch-paddle-offset * 2))
$paddle-active-offest: cacl($switch-width - $paddle-width - ($switch-paddle-offset * 1.5))

↓

$paddle-height: $switch-height - ($switch-paddle-offset * 2)
$paddle-width: $switch-height - ($switch-paddle-offset * 2)
$paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5)

'cacl'...:open_mouth:

[JollyGrin]

Also have the same error

On Bulma 0.7.4

[murilobd]

Just submitted the #28 with fix from the mistyped cacl word

[Wikiki]

Hi,

Thanks @murilobd it's merged.
I'll update npm before the end of the week

[gauravat16]

I am still facing the issue on Bulma 0.7.5. I got the minified file from master branch dist folder.

[thmsklngr]

Hi,

I'm using Bulma 0.7.5 and I'm facing problems in displaying the switch button correctly. For some reason I can see warnings at label::after in my inspector:

top: .75rem-calc($switch-height - ($switch-paddle-offset * 2))/2;
width: calc($switch-height - ($switch-paddle-offset * 2));
height: calc($switch-height - ($switch-paddle-offset * 2));

They're all striked through, so the sliding button won't show up. Demo site is working pretty well. It seems that the SASS file is not properly compiled to CSS. I investigates the original SASS file, for some reason I can't see the corresponding lines ...

Any ideas why?

Many thanks in advance, regards, Thomas

[BarGillNVLab]

Same problem - latest versions of Chrome, bulma and npm - and switches just switch the color, without that nice animation :)

[BarGillNVLab]

same problem.
fixed it this way.

index.sass L14:L16

$paddle-height: calc($switch-height - ($switch-paddle-offset * 2))
$paddle-width: calc($switch-height - ($switch-paddle-offset * 2))
$paddle-active-offest: cacl($switch-width - $paddle-width - ($switch-paddle-offset * 1.5))

↓

$paddle-height: $switch-height - ($switch-paddle-offset * 2)
$paddle-width: $switch-height - ($switch-paddle-offset * 2)
$paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5)

'cacl'...

Could you explaion a little bit more?
Thanks in advance
Efi

[julio-gorge]

Broken for me on latest versions of Chrome and Firefox (Win10) too! Bulma 0.74.

[MakRatanakKh]

Yeah, I have the same issue here.

[Belgian93]

Was using bulma-extensions and had the same issue, "solved" by using the individual bulma-switch package found here: bulma-switch.

Seems there is a little version mismatch between the bundled extensions and the individual component.

[zhukovsergei]

same here.
Latest Google chrome, I tried both bulma-switch.min.css compiled form this repo and installed via npm (both compiled css files are different). Both way gives this view

[Nonononoki]

Same problem here: Chrome 78 and Bulma 0.8.0.
Workaround: Use earlier version: https://github.com/Wikiki/bulma-switch/blob/8c20fa23fbc697d70a2e3d886c872a328afab202/dist/css/bulma-switch.min.css

[fspring]

Was using bulma-extensions and had the same issue, "solved" by using the individual bulma-switch package found here: bulma-switch.

Seems there is a little version mismatch between the bundled extensions and the individual component.

That also worked for me. Using the bulma-extensions package resulted in the error described here.

[iplanwebsites]

Thanks for the PR - had this issue as well today.

[faroukfaiz10]

Same problem here: Chrome 78 and Bulma 0.8.0.
Workaround: Use earlier version: https://github.com/Wikiki/bulma-switch/blob/8c20fa23fbc697d70a2e3d886c872a328afab202/dist/css/bulma-switch.min.css

This resolved it for me!

[greenhost87]

Same problem here: Chrome 78 and Bulma 0.8.0.
Workaround: Use earlier version: https://github.com/Wikiki/bulma-switch/blob/8c20fa23fbc697d70a2e3d886c872a328afab202/dist/css/bulma-switch.min.css

Also work for me

[doc-han]

The problem here is that. Whoever did run the last build for bulma-switch.min.css made an error of having uncompiled sass in CSS