fix(angular): fix height of content if dialog gets a fixed height (#594)

* feat(angular): add no scroll input to dialog component * fix(angular): fix height of content if dialog gets a fixed height --------- Co-authored-by: Tim Sielemann <[email protected]>
haiilo · Oct 24, 2024 · 6afbe1d · 6afbe1d
1 parent 5568011
commit 6afbe1d
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 39 deletions.
diff --git a/angular/projects/catalyst-demo/src/app/dialog/dialog.component.html b/angular/projects/catalyst-demo/src/app/dialog/dialog.component.html
@@ -1,41 +1,89 @@
-<cat-dialog [style.height]="'80vh'">
+<cat-dialog [style.height]="'80vh'" [noScroll]="true">
   <cat-dialog-header headline="Headline"></cat-dialog-header>
-  <cat-datepicker
-    clearable
-    icon-right
-    icon="calendar-outlined"
-    label="Datepicker attached to dialog"
-    min="0001-01-01T00:00:00.000Z"
-    mode="daterange"
-    placeholder="Select date"
-    [attachToElement]="true"
-  >
-  </cat-datepicker>
-  <cat-dropdown>
-    <cat-button slot="trigger">Click me</cat-button>
-    <p slot="content">
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
-      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
-      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua.
-    </p>
-  </cat-dropdown>
-  <cat-datetime label="Datetime" clearable>
-    <cat-date label="Date start"></cat-date>
-    <cat-time label="Time start"></cat-time>
-  </cat-datetime>
+  <div class="cat-flex-col cat-gap-m" [style.height]="'100%'">
+    <cat-datepicker
+      clearable
+      icon-right
+      icon="calendar-outlined"
+      label="Datepicker attached to dialog"
+      min="0001-01-01T00:00:00.000Z"
+      mode="daterange"
+      placeholder="Select date"
+      [attachToElement]="true"
+    >
+    </cat-datepicker>
+    <cat-dropdown>
+      <cat-button slot="trigger">Click me</cat-button>
+      <p slot="content">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.
+      </p>
+    </cat-dropdown>
+    <cat-datetime label="Datetime" clearable>
+      <cat-date label="Date start"></cat-date>
+      <cat-time label="Time start"></cat-time>
+    </cat-datetime>
 
-  <form [formGroup]="form">
-    <cat-select
-      label="Select"
-      formControlName="option"
-      [nativeAttributes]="{ 'data-test': 'test-attribute' }"
-      hint="this is a hint"
-      [connector]="countryConnector"
-      [clearable]="true"
-    ></cat-select>
-  </form>
+    <form [formGroup]="form">
+      <cat-select
+        label="Select"
+        formControlName="option"
+        [nativeAttributes]="{ 'data-test': 'test-attribute' }"
+        hint="this is a hint"
+        [connector]="countryConnector"
+        [clearable]="true"
+      ></cat-select>
+    </form>
+    <cat-scrollable class="cat-dialog-pull-h">
+      <div class="cat-ph-l">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+        kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.
+      </div>
+    </cat-scrollable>
+  </div>
 
   <cat-dialog-actions>
     <cat-button variant="text" class="cat-mr-auto">Tertiary</cat-button>

diff --git a/angular/projects/catalyst/src/lib/dialog/dialog.component.html b/angular/projects/catalyst/src/lib/dialog/dialog.component.html
@@ -1,5 +1,5 @@
 <ng-content select="cat-dialog-header"></ng-content>
-<cat-scrollable *ngIf="!disableScrolling; else noScroll"
+<cat-scrollable *ngIf="!noScroll; else noScroll"
   [noOverscroll]="noOverscroll"
   [noScrolledInit]="noScrolledInit"
   [scrolledBuffer]="scrolledBuffer"
@@ -10,7 +10,7 @@
   </div>
 </cat-scrollable>
 <ng-template #noScroll>
-  <div class="cat-dialog-content">
+  <div class="cat-dialog-content no-scroll">
     <ng-content></ng-content>
   </div>
 </ng-template>

diff --git a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss
@@ -42,3 +42,8 @@
     transform: none;
   }
 }
+
+.cat-dialog-content.no-scroll {
+  height: 100%;
+  overflow: hidden;
+}
diff --git a/angular/projects/catalyst/src/lib/dialog/dialog.component.ts b/angular/projects/catalyst/src/lib/dialog/dialog.component.ts
@@ -30,7 +30,7 @@ export class CatDialogComponent implements AfterContentInit {
    * Flag to disable scrolling behavior of dialog content. Default is false. If set to true the
    * using component is responsible for not overflowing the viewport.
    */
-  @Input() disableScrolling = false;
+  @Input() noScroll = false;
 
   /**
    * Flag to disable/enable overscroll behavior.