Looking for a quick solution. Refer to the image below, where I am struggling to align the toggle switch horizontally alongside the bootstrap buttons. My suspicion is that it may be related to the CSS of this customized toggle switch. Despite trying various methods within the code on the razor page, nothing seems to work. Thanks.
Razor Page Code:
<div class="container" style="margin-top: 2em">
<div class="row align-items-center">
<div class="col-sm">
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="col-sm">
<button type="button" class="btn btn-secondary">
Button
<i class="fas fa-play"></i>
</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-secondary">
Button
<i class="fas fa-play"></i>
</button>
</div>
</div>
Custom CSS for Toggle Switch
.onoffswitch {
position: relative;
width: 70px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 24px;
padding: 0;
line-height: 20px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
background-clip: padding-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 5px;
background-color: #383B40;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 5px;
background-color: #383B40;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 30px;
margin: 0px;
background: #FF0000;
position: absolute;
top: 0;
bottom: 0;
right: 40px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #00FF00;
}