bat-mirialta style flex to avoid scrollbar

phonlab-tcd · Jun 11, 2024 · 0d056ee · 0d056ee
1 parent 3c1b1fa
commit 0d056ee
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 35 deletions.
diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.html
@@ -1,12 +1,13 @@
-<div class="batmirialtaHeader">
-  <div>
-    {{ ts.l.batmirialta }}
-    An Bat Mírialta
-  </div>
-  <div class="closeBatmirialtaBtn" (click)="closeEmitter.next(true)">
-    <i class="fa fa-times"></i>
+<div class="group">
+  <div class="batmirialtaHeader">
+    <div>
+      {{ ts.l.batmirialta }}
+      An Bat Mírialta
+    </div>
+    <div class="closeBatmirialtaBtn" (click)="closeEmitter.next(true)">
+      <i class="fa fa-times"></i>
+    </div>
   </div>
+  <iframe src="https://bat-mirialta.abair.ie"  frameborder="0">
+  </iframe>
 </div>
-<iframe src="https://bat-mirialta.abair.ie"  frameborder="0" style="overflow: hidden; height: 100%;
-        width: 100%; position: absolute;">
-</iframe>
diff --git a/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss b/ngapp/src/app/student/bat-mirialta-drawer/bat-mirialta-drawer.component.scss
@@ -8,6 +8,15 @@
   align-items: center;
 }
 
+.group {
+  height: 100%;
+  width: 100%;
+  margin: none;
+  padding: none;
+  display: flex;
+  flex-flow: column;
+}
+
 .closeBatmirialtaBtn {
   margin-left: auto;
 }
@@ -16,32 +25,40 @@
   cursor: pointer;
 }
 
-.textFieldContainer {
-  width: 100%;
-  resize: none;
-  z-index: 1;
-  color: var(--dark-text);
-  background: white;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
+iframe {
+  flex: 1 1 auto;
 }
 
-.textField {
-  width: 100%;
-  resize: none;
-  z-index: 1;
-  color: var(--dark-text);
-  background: white;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
-  border: none;
+:host {
+  overflow: hidden;
 }
 
-.audioPlayer {
-  height: 30px;
-  width: 90%;
-  background-color: #f1f3f4;
-  border: 1px solid #8c806e86;
-}
+// .textFieldContainer {
+//   width: 100%;
+//   resize: none;
+//   z-index: 1;
+//   color: var(--dark-text);
+//   background: white;
+//   padding-left: 20px;
+//   padding-right: 20px;
+//   padding-top: 10px;
+// }
+// 
+// .textField {
+//   width: 100%;
+//   resize: none;
+//   z-index: 1;
+//   color: var(--dark-text);
+//   background: white;
+//   padding-left: 20px;
+//   padding-right: 20px;
+//   padding-top: 10px;
+//   border: none;
+// }
+// 
+// .audioPlayer {
+//   height: 30px;
+//   width: 90%;
+//   background-color: #f1f3f4;
+//   border: 1px solid #8c806e86;
+// }