Label alignment

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:
image

but… WHY?
The text is not taking up the full height:
image

The button doesnt have any padding on top:
image

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. :wonky:

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

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>

If you add vertical-align:middle: in that ruleblock it would align as you want.

If I correctly understand the issue? :slightly_smiling_face:

1 Like

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.