How to make a div stick beside a checkbox and label? [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
This is the sample http://jsfiddle.net/TX8fs/1/
I tried
display:block;float:left;
But the urgent input checkbox will overlap the 2 input infront of it. Any solution to fix this? I want to display the urgent input checkbox beside the label.

Answer 1

Something like this? jsfiddle
Note: only switched order of HTML elements inside div, and added "float: left;" to **
.select-style{
display: inline;
}
.onoffswitch {
position: relative; width: 136px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
float: left; /* ** added line ** */
}
.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: 19px; padding: 0; line-height: 15px;
font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 12px; margin: 0px;
background: #A1A1A1;
position: absolute; top: 0; bottom: 0;
right: 124px;
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: #A1A1A1;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
<!-- Switch order of checkbox and switch-->
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
</div>
</div>

Answer 2

The easiest solution is to simply make your .select-style an inline-block instead of an inline element, as can be seen here.
.select-style {
display: inline-block;
}
.onoffswitch {
position: relative;
width: 136px;
-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: 19px;
padding: 0;
line-height: 15px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 12px;
margin: 0px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 124px;
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: #A1A1A1;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
However, if you additionally want to ensure that all three elements are aligned vertically, you'll need to also add vertical-align: middle to all three elements:
input, input + label, .select-style {
vertical-align: middle;
}
Which results in the following:
.select-style {
display: inline-block;
}
.onoffswitch {
position: relative;
width: 136px;
-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: 19px;
padding: 0;
line-height: 15px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 12px;
margin: 0px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 124px;
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: #A1A1A1;
}
input, input + label, .select-style {
vertical-align: middle;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
Hope this helps! :)