So i’m sure this has been asked numerous times, in numerous ways, but it just doesn’t make any sense to me.
<div>
Table Form:
<label class="switch">
<input type="checkbox" onchange="toggleswitch();">
<span class="slider round"></span>
</label>
</div>
CSS appled (from w3schools.com/howto/howto_css_switch.asp ):
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
Result:
but… WHY?
The text is not taking up the full height:
The button doesnt have any padding on top:
If i give the container div a fixed height, the slider sticks out the bottom.
If the text is not there, the div becomes the height of the slider.
Why is the slider below the text baseline?
Hi there m_hutley,
is your intention to have the text and slider lined up?
coothead
yes, i’d like the bottom of the slider to rest on the baseline of the text, and not push down any elements below it.
Hi there m_hutley,
to my eyes vertical-align:baseline
looks a little bit odd compared to middle.
I do not, and never will use w3schools code
but I can show you an example to test…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<meta name="keywords" content="CSS, customised, sliding, checkboxes, radio, buttons">
<meta name="description" content="CSS customised sliding form input type=checkbox and form input type=radio examples">
<title>CSS customised sliding buttons</title>
<!--<link rel="icon" sizes="144x144" href="../images/favicon.png">
<link rel="stylesheet" href="css/screen1.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em sans-serif;
}
h1 {
font-size: 1.5em;
color: #444;
text-transform: capitalize;
}
#sliding-items {
display: inline-block;
padding: 1em;
border: 1px solid #999;
border-radius: 0.75em;
background-color: #fff;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ),
0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
}
#sliding-items fieldset {
border: 0;
}
#sliding-items legend {
font-weight: bold;
}
.cb, .rd {
position: relative;
display: inline-block;
width: 2.5em;
height: 1.5em;
border: 1px solid #999;
margin: 0.25em;
vertical-align: middle; /* change this value to baseline or top, if preferred */
background-color: #ccc;
transition: 0.5s ease-in-out;
}
.rd {
border-radius: 0.75em;
}
.cb::before, .rd::before {
position:absolute;
top: 0.25em;
left: 0.25em;
width: 1em;
height: 1em;
line-height: 0.75em;
font-size: 1em;
font-weight: bold;
content: '\02713';
text-align: center;
color: transparent;
background-color: #fff;
transition: 0.5s ease-in-out;
}
.rd::before {
top: 0.125em;
left: 0.12em;
width: 0.5em;
height: 0.5em;
border-radius: 0.5em;
font-size: 2em;
font-weight: normal;
content: '';
}
input[type="checkbox"]:checked + .cb,
input[type="radio"]:checked + .rd {
background-color: #2196f3;
}
input[type="checkbox"]:checked + .cb::before,
input[type="radio"]:checked + .rd::before {
transform: translateX( 1em );
color: #2196f3;
}
input[type="radio"]:checked + .rd::before {
transform: translateX( 0.5em );
}
</style>
</head>
<body>
<h1>CSS cutomised sliding buttons</h1>
<form id="sliding-items" action="#">
<fieldset>
<legend> checkoxes</legend>
table form
<input type="checkbox" id="cb1" name="cb1" value="checkbox 1" hidden>
<label for="cb1" class="cb"></label><br>
table form
<input type="checkbox" id="cb2" name="cb2" value="checkbox 2" hidden>
<label for="cb2" class="cb"></label><br>
table form
<input type="checkbox" id="cb3" name="cb3" value="checkbox 3" hidden>
<label for="cb3" class="cb"></label>
</fieldset>
<fieldset>
<legend>radio buttons</legend>
table form
<input type="radio" id="rd1" name="r" value="radio 1" hidden>
<label for="rd1" class="rd"></label><br>
table form
<input type="radio" id="rd2" name="r" value="radio 2" hidden>
<label for="rd2" class="rd"></label><br>
table form
<input type="radio" id="rd3" name="r" value="radio 3" hidden>
<label for="rd3" class="rd"></label>
</fieldset>
<input type="submit">
</form>
</body>
</html>
coothead
3 Likes
PaulOB
June 19, 2020, 3:39pm
5
m_hutley:
Result:
I don’t get that result in codepen with the code you posted?
Was there more code to go with that?
Odd, I can’t get it to reproduce in Codepen either…
I disabled all of the javascript, so none of that should be playing with the code. The full HTML (Well, HTML/CSS combined) would be:
<html><head>
<title>Lab Status</title>
<style>
body {
background-color: #111;
}
.tf {
color: white;
}
svg {
background-color: #222;
width: 100%;
height: calc(100% - 30px);
}
.machine {
cursor: pointer;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
body > #tableform_wrapper,
body > table,
.table > svg {
display: none;
}
.table > #tableform_wrapper,
.table > table {
display: block;
}
</style>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="js/d3-scale-chromatic.v0.3.min.js"></script>
</head>
<body>
<div class="tf">
Table Form:
<label class="switch">
<input type="checkbox" onchange="toggleswitch();">
<span class="slider round"></span>
</label>
</div>
<table id="tableform">
<thead>
<tr>
<th>Bay</th><th>Location</th><th>Status</th><th>Name</th><th>Class</th><th>Layout</th><th>VG Letter</th><th>ATM/ITM</th><th>Core</th><th>BIOS</th><th>Processor</th><th>RAM</th><th>DVD</th><th>Access Point</th><th>Screen Type</th><th>Screen In.</th><th>Card Reader</th><th>SMART</th><th>CCR</th><th>SPS</th><th>Keypad</th><th>Check Module</th><th>Cash Module</th><th>Validator</th><th>Env. Deposit?</th><th>Env. Dispenser?</th><th>Night Deposit?</th><th>Audio</th><th>reciptprinter</th><th>journalprinter</th><th>stmtprinter</th><th>coindispense</th><th>camera</th><th>idscanner</th><th>phone</th><th>dispenser</th><th>cassettes</th><th>oppanel</th><th>alarm</th><th>ups</th><th>classfull</th><th>statusname</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//SNIP: A very long D3 Fever Dream.
</script></body></html>
Erik_J
June 19, 2020, 5:18pm
7
If you add vertical-align:middle:
in that ruleblock it would align as you want.
If I correctly understand the issue?
1 Like
PaulOB
June 19, 2020, 5:31pm
8
As Erik said the vertical-align:middle is probably what’s needed to ensure that the text and the switch align better.
In your example there could be an issue if the font-size on that label was larger than you have shown as the baseline would change accordingly.
e.g… if you add this to your codepen the alignment changes considerably.
.switch {
font-size: 3rem;
}
Adding the following will see the alignment back to normal.
.switch input {
position: absolute;
}
This is because the checkbox (without position:absolute added) is not removed from the flow and although it is height:0 it will still affect the line-height should the font-size be increased and the text will move away from the switch.
I would suggest adding the following css:
.switch input {
position: absolute;
}
.switch{vertical-align:middle;}
@coothead ’s example uses display:none on the inputs which is why they have no impact on layout however if you make them display:none then keyboard uses can’t tab to them nicely.
As an aside the anonymous text next to the label can often be a source of misery where vertical-align is concerned and its much better to wrap the text in a span and then you can avoid issues later on if they arise because you will be able to target that specific section of text.
<div class="tf">
Table Form:
<label class="switch">
i.e.
<div class="tf">
<span>Table Form:</span>
<label class="switch">
1 Like
system
Closed
September 19, 2020, 12:31am
9
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.