Bootstrap Switch Question

Questions
1

Hey Guys,

quick question. Maybe one of you has the solution for this.

What i want in my solution is:

We do have a “Switch” in bootstrapExtraComponents, but it looks kinda weird and not at all what i want design-wise.

I tried to modify a normal checkbox with the styleclasses “form-check form-switch” and tried to add the attribute role=“switch” with no success.

I just a checkbox in the style of the bootstrap mini switch.

Am i just blind and not see the element for it?

Any ideas?

Greetings
-Vik

2

Hi Vik,

there’s not really a component for this.
An option could be to use the bootstrap-checkbox, set the style class to ‘mini-switch’ and include the css below

It’s a workaround and you might want to tweak this, but I guess this is close.

.mini-switch {
  position: relative;
  display: inline-block;
}

.mini-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mini-switch > label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
  width: 34px !important;
  height: 20px !important;
}

.mini-switch > label:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.mini-switch span {
    top: 0px;
    left: 40px;
    position: absolute;
}

.mini-switch > label:has(.ng-not-empty) {
	  background-color: #2196F3;
}

.mini-switch > label:has(.ng-not-empty):before {
		transform: translateX(14px);
}
3

Thanks Marc,

i´ll try it out.
Im gonna send a feature request for this aswell. Imo its a needed thing to have.

Greetings

4

We do have a switch component, although I do agree the version you pointed out is much nicer.

Problem is that it will be a matter of taste and usecase.
After all it’s just a css change that does the trick, from that perspective (Ti)NG is great.

This presentation by Patrick Ruhsert on SW22, was a lot of fun, but a good example what the possibilities are for developers:
viewtopic.php?p=123504#p123504

Understanding CSS is half the work and gives you endless possibilities

5

Hi Vik,

As Marc suggested, a switch is just a pretty checkbox.

The following article explains it well: Creating a CSS-Only Toggle Switch

Here’s some CSS that will work with servoy (Inspired by the article above):

Assuming the checkbox has the class “switch”.

.switch input[type="checkbox"] {
	appearance: none;
	position: relative;
	font-size: inherit;
	background: currentcolor;
	width: 2em;
	height: 1em;
	box-sizing: content-box;
	border: 1px solid;
	border-radius: 1em;
	vertical-align: text-bottom;
	margin: auto;
	color: gainsboro;
	box-shadow: inset 0 0.1em 0.3em rgba(0, 0, 0, 0.05), inset 0 0.2em 0.6em rgba(0, 0, 0, 0.05);
	transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.switch input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	box-sizing: border-box;
	width: 0.9em;
	height: 0.9em;
	margin: 0 0.05em;
	color: lightslategray;
	border: 1px solid currentcolor;
	border-radius: 50%;
	background: currentcolor;
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
} 

.switch input[type="checkbox"]:checked {
	color: lightsteelblue;
}

.switch input[type="checkbox"]:checked::before {
	left: 1em;
	background: steelblue;
}

.switch input[type="checkbox"] + span {
	margin-left: 0.3em;
}
6

Hi Seain,

thanks alot too.

Your css example works perfect, just tried it and it does its job.

Greetings
-Vik

7

Small change to Sean’s css in order to match the example and fix the color transition.
Also made colors adjustable and added size setting.

now “.switch” will show normal size “.switch .switch-l” and “.switch .switch-xl” will display larger switches in case it’s needed

.switch {
	--switch-color-off: #ccc;
	--switch-color-on: #2196F3;
	--switch-color: #fff;
	--switch-size: inherit;
	
	&.switch-l {
		--switch-size: 1.4em;
	}
	
	&.switch-xl {
		--switch-size: 1.8em;
	}
	
	height: calc(2 * var(--switch-size)) !important;
	
	
	& input[type="checkbox"] {
			appearance: none;
			position: relative;
			font-size: var(--switch-size);
			color: var(--switch-color-off);
			background-color: currentcolor;
			width: 2.2em;
			height: 1.2em;
			box-sizing: content-box;
			border: 0px solid;
			border-radius: 1.1em;
			vertical-align: text-bottom;
			margin: auto;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
			outline: unset;
	}
	
	& input[type="checkbox"]::before {
		content: "";
		position: absolute;
		top: 50%;
		left: .2em;
		transform: translate(0, -50%);
		box-sizing: border-box;
		width: 0.8em;
		height: 0.8em;
		color: var(--switch-color);
		border: 1px solid currentcolor;
		border-radius : 50%;
		background: currentcolor;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	& input[type="checkbox"]:checked {
		color: var(--switch-color-on);
	}
	
	& input[type="checkbox"]:checked::before {
		left: 1.1em;
		background: #fff;
	}
	
	&  input[type="checkbox"]+span {
		font-size: var(--switch-size);
		margin-left: 0.3em;
	}
}
8

Hi Marc,

just tried your version.
.switch works but if i go .switch-l or .switch-xl it seems broken.

I´ll have a look into this. Thanks

9

Hi Vik,

not broken, but you need to add it so the full style class of the checkbox is: ‘.switch .switch-xl’
The .switch does apply the normal version as you experienced, then the additional .switch-xl overrides a property in .switch.
That’s why you need both