wikiki / bulma-switch Goto Github PK

When building my project I get these warnings in the console:

Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

I am using:
bulma 0.9.3
bulma-switch 2.0.0
sass 1.32.7

Expected behavior
No warnings in build output

focus a switch and then press the enter key, the switch does not toggle

So when trying to use the switches, I come across this issue where if I click a certain area that isn't the switch, it triggers anyways. It also adds some large extra white space that I did not intend for. http://prntscr.com/h99q8m
http://prntscr.com/h99qvn

I've created a patch for bulma-switch by basically :

• switching from indented to sass syntax
• using sass for building process (instead of gulp)
• replacing $color variable usages by vars through cv.getVar($name) (because as far as I can see this allows to support bulma themes correctly instead if using direct colors)
• adding a sample.html page to test the result (with a dark mode enabler)

The code is available here : https://gitlab.com/jf.brazeau/bulma-switch-migration

The changes are listed here : https://gitlab.com/jf.brazeau/bulma-switch-migration/-/commit/c3a2b3e2e61bfd1d420b73315aba78f963fd62fb

I think I will use the scss directly in my project until the extension is officially migrated.

The result :

When I include bulma-switch.min.css in my project file and use the following input:

<link rel="stylesheet" href="/css/bulma-switch.min.css">
<div class="field">		
	<label class="label" for="switchExample">Click Me</label>
	<input type="checkbox" name="clickme" class="switch" id="switchExample">
</div>

The switch does not display (neither does a plain checkbox). No errors show in the console and bulma-switch.min.css is accessible if I access it directly. I'm using Bulma 0.6.2.

Apart from Bulma itself, are there other resources that are required for the switch extension to work correctly? I installed by simply copying bulma-switch.min.css to the server path in the link tag above.

I downloaded bulma-switch.min.css and added <link rel="stylesheet" href="/bulma-switch.min.css"> in my HTML, but using <input type="checkbox" class="switch" checked="checked"> no switch is displayed.

Not sure why, I am still investigating but the view height gets into an incorrect state when interacting with the switch or radios.

Hello

Here's the error that sass throws when used in a terminal:

Error: The line was indented 2 levels deeper than the previous line.
        on line 156 of bulma-switch/switch.sass

151:     &.is-unchecked-#{$name}
152:       + label
153:         &::before
154:           background: $color
155:       &.is-outlined
156:           + label
157:             &::before
158:               background-color: transparent
159:               border-color: $color !important
160:             &::after
161:               background: $color

May I suggest that you use travis-ci, or any other CI tool, similar to how we used it in bulma, so that it detects such errors before merging.

Could bulma-switch be updated to accommodate custom labels, similar to this](https://www.cssscript.com/creating-accessible-switch-controls-with-pure-css-scss/)?

Hi There

First of all, awesome project! My question is that could it be possible to include the compiled CSS in the NPM package, so that if I don't use SASS at all I can easly import the minified CSS for my project?

For example when I'd like to use Font Awesome, all I have to do is import their bundled CSS like:

import 'font-awesome/css/font-awesome.min.css';

Thanks!

When I try to use my switch like the one in the demo, it doesn't move.

I can see it register the click in my handler when I click it or use the spacebar when it's focused.

Since I'm loading these dynamically, I'm generating my id, name and label "for" with all the same value, IE: isActive-n.

The switch is loading properly on the page, it looks great, it just doesn't move. I've tried a few different id/lable value formats and nothing works yet.

Here is the switch part of my react component:

      <div className="column is-2">
          <div className="field is-pulled-right">
            <input
              id={`isActive-${props.id}`}
              type="checkbox"
              name={`isActive-${props.id}`}
              className="switch is-success is-rounded"
              checked={checked}
              onChange={swithOnChangeHandler}
            />
            <label htmlFor={`isActive-${props.id}`}>{label}</label>
          </div>
        </div>

Unclicked:

Clicked:

Clicked again:

Notice the fuzzy/dotted border around the box. If I click away, the border is removed.

A few things I've tried:

input:focus{
  outline:none;
}

and:

input[type="radio"]:focus {
    outline: none;
}

With no luck. I'd like there to be no fuzzy/dotted border at all when the button is selected.

@Wikiki Hi, I was wondering why checked="checked" doesn't work on the switch, nor does checked attribute. It works without the css, and it looks like this https://honestly-i-hate.ender.site/i/D4KoCd.png it works.

Thanks, Ender

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

Offset is misspelled!

Hello! I used the example provided in the documentation:

I have also installed it with npm, but the default(primitive) checkbox is displayed:

The checkbox input for the switch is currently marked with the absolute position which causes it to not always position itself correctly on the page

Current css

.switch[type="checkbox"] {
   outline: 0;
   user-select: none;
   position: absolute;
   margin-bottom: 0;
   opacity: 0;
   left: 0;
}

Is it not easier to just use a display:none? or the parent div (field) should be position:relative.

This works so far better in this case.

.switch[type="checkbox"] {
    display: none;
}

Hello,

we just updated our dependencies and patched bulma-switch from 2.0.0 to 2.0.4. This is only a patch, but it broke some of our layouts, some labels are places weirdly, and having multiple switches (with multiline labels) may result in overlapping labels (see image below).

This is because apparently, the height is now set to 2.5em (comparing using the chrome dev tools), and the switches are now flexed(?). I wanted to see what else changed in this "patch", but there is no updated changelog, and the latest release tage before 2.0.4 is 1.0.1, so this doesn't help, either.

Would it be possible to get a list of things that have changed, maybe update the changelog or provide earlier tags?

Thanks in advance!

I have this switches inside a horizontal form next to a text input and the vertical align for this switches are off. Can we center them vertically?

There are a lot of warnings when compiling the sass. The same problem as jgthms/bulma#3333.

Is it possible to get an update?

Removed issue description due to it being an inconvenience of the mythological error 40... When a team member merges an import of a non-compiled .min-file from the node_modules.

Possibly related: #72

I have a problem aligning the switch in a line with another bulma (input) element:

<div class="column is-one-quarter">                     
    <div class="field">
        <label class="label">a1</label>
        <div class="control">
            <div class="select">
                <select name="a1" id="a1Field" required>
                    <option value="" disabled selected value>Please Choose...</option>
                    <option value="...." > ... </option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="column is-one-quarter">                     
	<label class="label">a2</label>
	<div class="field">
		<input id="a2Switch" type="checkbox" name="a2Switch" class="switch is-outlined is-danger is-large">
		<label for="a2Switch" id="a2SwitchLabel" class="has-text-info">on</label>
	</div>
</div>

this results in:

and the different hights are easier to spot, but also the switch starts "higher" already and does not vertically align with the input next to it.

hello. @Wikiki

I found Bug

Use CDN.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bulma-switch.min.css">

Regardless of whether it is set to checked="checked" or checked="", it is always displayed as checked.

When you check the DOM, it becomes checked="checked" . (In HTML, checked="" is used)

Thank you.

Hey !.

I can't seem to achieve to have text on both sides.
I am using the switch on colorsandfonts.com and I would like to display this:
" Light ( switch ) Dark "

This is my code by now:

                                <label for="switchRoundedInfo">
                                    <ion-icon name="sunny"></ion-icon>
                                </label> 

The only problem is that it gets messy if I try it.

Thank you very much and have a good day !

Hello,

I'm getting errors on this package:

Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

I have this dependencies:
"sass": "^1.34.1",
"sass-loader": "^10.1.1",

Can you add this css code as an option to remove the dotted border on a switch?

.switch[type='checkbox'] + label::before,
.switch[type='checkbox']:checked + label:before {
outline: none;
}
.switch[type='checkbox'] + label::after,
.switch[type='checkbox']:checked + label:after {
outline: none;
}

As seen here:

Thanks,
David

So, label is required, as I realized after messing around with this for a while. I don't want a label on my switches though, as I use them in a table layout, the "label" is given by the table head.

I did workaround it by simply adding an empty label, however I think the label should be optional, if possible.

<input type="checkbox" class="switch" :id="index+col" v-modal="list[col]">
<label :for="index+col"></label>

Hello, I'm trying to use the bulma-switch inside my angular project, install bulma-extensions through npm, but I do not know how to reference the bulma-switch for my css to work

Hi. I use bulma-switch with bulmaswatch. And I have an error with bulma-switch.
Bulmaswatch uses rem but this does em, so the below error occurs.
SassError: 1.275em and 0.5rem have incompatible units.

I feel happy these values change to be useing calc().

You must add the scss file where you load the original sass. Would be great if you could add this to package.

<template>
  <span>
      <input type="checkbox" :id="_uid" class="switch" :class="type" :value="val" v-model="checked">
      <label :for="_uid"> {{ label }}</label>
  </span>
</template>
<script>
  import Vue from 'vue'
  import BulmaSwitch from "bulma-switch"
  import "../../public/assets/bulma_switch.scss"
  export default{
    name:"BulmaSwitch",
    props: ['type','value', 'val','label'],
    data () {
      return {
      }
    },
    computed: {
      checked: {
        get() {
          return this.value
        },
        set(value) {
          this.$emit('input', value)
        }
      }
    }
  }
</script>

Usage in vue:

              <div class="control mb-2">
                <BulmaSwitch v-model="myBooleanVariable" type="is-rounded is-warning" label="Your label" />
              </div>

I have developed a form (POST method) which contains some switches, but they send "on" and nothing instead of "true" and "false".

switch example
<div class="field"> <div class="control"> <input id="meas-hum" type="checkbox" name="meas-hum" class="switch is-info is-rounded is-outlined" checked> <label for="meas-hum" class="switch-label"></label> </div> </div>

switch handling function
document.querySelectorAll(".switch").forEach(function (swt) { swt.addEventListener("click", function (e) { swt.value = swt.checked; }); });

For most Bulma form items, when disabled is set in a parent <fieldset>, the element is grayed. It would be cool if bulma-switch did the same.

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 ^^

When selected, the labels making the switch button show an outline

Could it be possible to set it to none so it doesn't show each time the switch is clicked?

When trying to use thymeleaf field binding, the whole switch disappears:

th:field="${test}"

Would be an awesome feature, not sure how it would work just yet but as soon as I get some free time I'm going to fork this and give it a go.

I used newest bulma-switch.min.css, but a switch handle isn't shown.
Base rectangle only.
version:ab1ee5e7f0f6e896bdec6a5189a91fb427722554

In older version(8c20fa2),
I can display correctly.

There is some mistake,I think.

First off thanks for the awesome work with the extensions!!

I just tried the switch in my project and the checkbox just remains as it was (i.e. it makes no difference to the state of the checkbox when I click on it).

I saw that you're using "id" on the form field. Does that mean it requires javascript for it to work?

If you could please advise.

Thanks!
Saurabh

Does someone have an idea on why is-rtl has no effect on the switch but the text only?

Can I put just one bulma switch in "is-rtl" mode inside a full page which is not rtl?

#43
doesn't work if you don't add a color to the input.
if you want a default input, you have to specify is-primary

• you should update the documentation since this is very useful

There should probably be some kind of visual feedback for when the switch is focused. In particular, it's nice for when tabbing through a form with keyboard.

I added the following snippet to achieve this, but not sure if this is necessarily the prettiest approach or if both elements need the feedback. Defaults were taken from the bulma button's defaults for focus.

$switch-focus-border-color: $link-focus-border !default
$switch-focus-box-shadow-size: 0 0 0 0.125em !default
$switch-focus-box-shadow-color: rgba($link, 0.25) !default

.switch[type="checkbox"]
  &:focus
    + label
      &::before
        border: 1px solid $switch-focus-border-color
        box-shadow: $switch-focus-box-shadow-size $switch-focus-box-shadow-color

      &::after
        border: 1px solid $switch-focus-border-color
        box-shadow: $switch-focus-box-shadow-size $switch-focus-box-shadow-color

Comparing focused/unfocused:

Thanks for all your work on these nice bulma extensions!