I have a label and a text. How can I align them side by side horizontally?
Currently is text is aligned at the bottom of label (as in the image). I would like to align text to the center of the label.
My html code is
<div>
<label class="switchnmn">
<input type="checkbox" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</dlv>
My css file is
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {display:none;}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slidernmn {
background-color: #2196F3;
}
input:focus + .slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
Where should I change that?
You can add vertical-align: middle on label and b element.
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {display:none;}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slidernmn {
background-color: #2196F3;
}
input:focus + .slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
label, b {
vertical-align: middle;
}
<div>
<label class="switchnmn">
<input type="checkbox" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
Define all three elements as display: inline-block; and vertical-align: middle; as shown below:
.x > * {
display: inline-block;
vertical-align: middle;
}
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {
display: none;
}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slidernmn {
background-color: #2196F3;
}
input:focus+.slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
<div class="x">
<label for="y" class="switchnmn">
<input type="checkbox" id="y" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</dlv>
Related
I followed instructions of w3schools to create a html toggle switch and I want text to be on the left of it to explain what the slider does but it keeps being put on top of the slider or miss aligned.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* 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;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<form class="options">
<div id="enabled">
<p>Enabled</p>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</form>
the text is in the p tag and the switch in the label.
I have tried removing display inline-block but it caused it to not look right.
Add display: flex; and align-items: center; to the #enabled div and maybe some margin for spacing.
More about Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
What you can do is to put the display property of your <p> tag to inline-block and vertical-align to middle. Thus, with a bit of padding to your paragraph, you can center it with your switch button.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
p {
display: inline-block;
vertical-align: middle;
padding-top: 5px;
padding-right:5px;
}
/* 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;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<form class="options">
<div id="enabled">
<p>Enabled</p>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</form>
I have created a custom toggle button with html input checkbox and with custom css which looks like this
As you can see the texts and toggle buttons are not aligned, I tried adding margin/padding/heights nothing worked.
Here is the html and corresponding css ->
<h5 style="display:inline" class="switch">Company</h5>
<label class="switch">
<input type="checkbox" id="company-survey-checker">
<span class="slider round"></span>
</label>
<h5 style="display:inline">Survey</h5>
And the css operating here is ->
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
Ideally the texts and toggle buttons should be on the same line but i am finding it difficult to achieve it , any help is much appreciated
Add vertical-align:middle to your label
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
vertical-align: middle
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<h5 style="display:inline" class="switch">Company</h5>
<label class="switch">
<input type="checkbox" id="company-survey-checker">
<span class="slider round"></span>
</label>
<h5 style="display:inline">Survey</h5>
I am trying to place a toggle button in a <summary> element, using the toggle button here: https://www.w3schools.com/howto/howto_css_switch.asp
It works fine on Firefox, but on Chrome, clicking on the toggle button actually toggles the <details> element instead of the toggle button. If I use the rounded version instead, I can toggle the toggle button if I click on the corner of the toggle button (the region that is no longer colored grey/blue because of the rounding), but not if I click on the interior.
What can I do to make it work on Chrome? Which of the two behaviors is "correct"?
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<details>
<summary>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</summary>
</details>
I mean in my opinion it's not exactly good UX, but to keep it simple and semantic, just separate the ambiguity in the actionable elements and their respective events they require. Eg;
.switch-summary-container {
position: relative;
margin: 1rem;
}
.switch-summary-container aside {
position: absolute;
top: -.5rem;
left: 1rem;
}
summary {
min-height: 40px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<section class="switch-summary-container">
<aside>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</aside>
<details>
<summary>
</summary>
Words Words Words.
</details>
</section>
I had tried this code for toggle switch circular, it works fine for android but it doesn't works fine for iOS.
Below is the reference of code which I have used to write the code below
Reference from where code is used
code:
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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: rgb(33, 159, 243);
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: white;
}
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%;
}
<label class="switch" data-align="right">
<input type="checkbox" id="togBtn" value="false">
<span class="slider round"></span>
</label>
I would like to know how can I add the label to the right side of the below toggle.
I tried to add label which is not correctly aligned.
Any help is apprecitated.
Plunkr link - https://plnkr.co/edit/NdnF2OycDZpk2FiiB7D6?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.switch {
position: relative;
display: inline-block;
width: 47px;
height: 20px;
}
.switch input {display:none;}
.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: 4px;
bottom: 4px;
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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html>
You can add the content into the label using css (::after) and using position relative to place it to the desired location.
.switch {
position: relative;
display: inline-block;
width: 47px;
height: 20px;
}
.switch input {display:none;}
.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: 4px;
bottom: 4px;
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(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider::after {
position:relative;
right:-55px;
content: "label"
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
</body>
</html>
Try the below code, I guess it should work.
.switch {
position: relative;
display: inline-block;
width: 47px;
height: 20px;
}
.switch input {
display: none;
}
.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: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.switch span {
display: inline-block;
position: relative;
width: 60px;
margin-left: 50px;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<label class="switch">
<input type="checkbox" checked>
<div class="slider round"></div>
<span>LABEL 1</span>
</label>
</body>