fix: Add more flexible map style

natlex · Dec 20, 2020 · 7c5a080 · 7c5a080
1 parent 73c54aa
commit 7c5a080
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/src/src/app/main/components/google-map/google-map.component.css b/src/src/app/main/components/google-map/google-map.component.css
@@ -1,3 +1,7 @@
 :host {
   display: contents;
 }
+
+.map {
+  display: contents;
+}
diff --git a/src/src/app/main/components/google-map/google-map.component.html b/src/src/app/main/components/google-map/google-map.component.html
@@ -1,3 +1,3 @@
 <ng-container *ngIf="loaded$ | async">
-  <google-map width="100%"></google-map>
+  <google-map class="map" height="100%" width="100%"></google-map>
 </ng-container>
diff --git a/src/src/app/main/main.component.css b/src/src/app/main/main.component.css
@@ -0,0 +1,9 @@
+:host {
+  display: contents;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
diff --git a/src/src/app/main/main.component.html b/src/src/app/main/main.component.html
@@ -1,5 +1,9 @@
-<p>main works!</p>
+<div class="content">
+  <p>main works!</p>
 
-<app-google-map></app-google-map>
+  <app-google-map></app-google-map>
 
-<app-date-slider (onSliderChange)="outputSliderRange($event)"></app-date-slider>
+  <app-date-slider
+    (onSliderChange)="outputSliderRange($event)"
+  ></app-date-slider>
+</div>