separate checkbox

sdhoek · May 7, 2018 · 082b46f · 082b46f
1 parent 3382b32
commit 082b46f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/src/app/map/from-to/from-to.component.css b/src/app/map/from-to/from-to.component.css
@@ -7,15 +7,16 @@
  z-index: 500;
  right: 20px;
  left: 108px;
- top: 15px;
- padding: 7px 10px 16px;
+ top: 71px;
+ padding: 7px 10px 7px;
 }
 
 @media(min-width: 550px){
  .from-to-container {
- top: 20px;
+ top: 72px;
  left: inherit;
  width: auto;
+ width: 200px;
  }
 }
 
@@ -113,7 +114,22 @@ button:active {
 }
 
 .checkbox-container {
- z-index: 500;
+ z-index: 509;
+ position: absolute;
+ right: 15px;
+ top: 20px;
+ width: 66%;
+ width: calc(100% - 144px);
+ padding: 10px;
+ display: block;
+ background: #f6be0e;
+}
+
+@media(min-width: 550px){
+ .checkbox-container{
+ width: 200px;
+ right: 20px;
+ }
 }
 
 .checkbox {

diff --git a/src/app/map/from-to/from-to.component.html b/src/app/map/from-to/from-to.component.html
@@ -1,3 +1,8 @@
+<div class="checkbox-container">
+ <input type="checkbox" class="checkbox" [(ngModel)]="onbegluurd" name="gluren" (change)="setOnbegluurd($event)" value="false">
+ <span>Ik wil onbegluurd fietsen.</span>
+</div>
+
 <div class="from-to-container">
 
  <div id="from-container">
@@ -28,8 +33,4 @@
  <button (click)="findRoute()" type="button" name="button">zoek</button>
  </div>
 
- <div class="checkbox-container">
- <input type="checkbox" class="checkbox" [(ngModel)]="onbegluurd" name="gluren" (change)="setOnbegluurd($event)" value="false">
- <span>Ik wil onbegluurd fietsen.</span>
- </div>
 </div>