Fix direction selection UI

This commit is contained in:
mmcw-dev 2017-10-21 22:17:32 -04:00
parent 30f32983b9
commit 4f19194222
1 changed files with 5 additions and 3 deletions

View File

@ -29,9 +29,10 @@
/* The switch - the box around the slider */ /* The switch - the box around the slider */
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: block;
width: 60px; width: 60px;
height: 34px; height: 34px;
margin: 0 auto;
} }
/* Hide default HTML checkbox */ /* Hide default HTML checkbox */
@ -131,7 +132,8 @@
float: left; float: left;
} }
#bwdLabel{ #bwdLabel{
float: right; position: absolute;
right: 10%;
} }
.label{ .label{
text-align: right; text-align: right;
@ -146,12 +148,12 @@
<div id="app"> <div id="app">
<div> <div>
<div class="label">Direction</div> <div class="label">Direction</div>
<span id="bwdLabel">BACKWARD</span>
<span id="fwdLabel" class="selected">FORWARD</span> <span id="fwdLabel" class="selected">FORWARD</span>
<label class="switch" onclick="setDir();"> <label class="switch" onclick="setDir();">
<input type="checkbox" id="dir"> <input type="checkbox" id="dir">
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
<span id="bwdLabel">BACKWARD</span>
</div> </div>
<div> <div>
<div class="label">Exposure (ms)</div> <div class="label">Exposure (ms)</div>