Fixitrod Fixitrod - 3 months ago 11
CSS Question

How to put these toggles switches side by side?

I have 2 toggle switches I'd like to format in two ways. I have fought this and just can't get it. Thank you!

Two formats I'm trying to get are...

Switch1( 0) Switch2( 0)

and

(This isn't coming accross correctly. Just looking for the switches to be centered below the label.

Switch1 Switch2

( 0) ( 0)

JSFIDDLE

HTML:

Switch 1
<div class="onoffswitch">
<input type="checkbox" name="centerLockSwitch" class="onoffswitch-checkbox" id="centerLockSwitch" value="centerLockSwitch" checked>
<label class="onoffswitch-label" for="centerLockSwitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<p>
</p>
Switch 2
<div class="keepScreenOn">
<input type="checkbox" name="keepScreenOn" class="keepScreenOn-checkbox" id="keepScreenOn" value="keepScreenOn" checked>
<label class="keepScreenOn-label" for="keepScreenOn">
<span class="keepScreenOn-inner"></span>
<span class="keepScreenOn-switch"></span>
</label>
</div>


CSS:

.onoffswitch {
position: relative;
width: 71px;
-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: 20px;
}

.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: 24px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}

.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}

.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}

.onoffswitch-switch {
display: block;
width: 19px;
margin: 2.5px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 43px;
border: 2px solid #999999;
border-radius: 20px;
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;
}

.keepScreenOn {
position: relative;
width: 71px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.keepScreenOn-checkbox {
display: none;
}

.keepScreenOn-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}

.keepScreenOn-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}

.keepScreenOn-inner:before,
.keepScreenOn-inner:after {
display: block;
float: left;
width: 50%;
height: 24px;
padding: 0;
line-height: 24px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}

.keepScreenOn-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}

.keepScreenOn-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}

.keepScreenOn-switch {
display: block;
width: 19px;
margin: 2.5px;
background: #FFFFFF;
position: absolute;
top: 0px;
bottom: 0;
right: 43px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}

.keepScreenOn-checkbox:checked + .keepScreenOn-label .keepScreenOn-inner {
margin-left: 0px;
}

.keepScreenOn-checkbox:checked + .keepScreenOn-label .keepScreenOn-switch {
right: 0px;
}

Answer

For the first layout you specified, display: inline-block is what you are looking for.

From MDN:

inline-block: The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

Let's add some containing divs:

<div class="switch-container">
  <div class="title">
    Switch 1
  </div>
  <div class="switch onoffswitch">
    ...
  </div>
</div>
<div class="switch-container">
  <div class="title">
    Switch 2
  </div>
  <div class="switch keepScreenOn">
    ...
  </div>
</div>

And then apply the display value appropriately:

.switch-container,
.title,
.switch {
  display: inline-block;
}

JS Fiddle example for layout #1


For the second layout, a little more tinkering is required:

We can keep the markup the same. However, now, the containers' children elements are block level (they take up the entire width of the container). The containers are not block level because they sit side by side each other horizontally.

As well as adding a fixed width, my approach to fix this would be to apply inline-flex rather than inline-block, because it makes it easier to horizontally center the items with flexbox's align-items: center. Read more about flexbox here.

.switch-container {
  width: 100px;
  display: inline-flex;
  flex-flow: column;
  align-items: center;
}

JS Fiddle example for layout #2