fix(angular): fix the position of popup cat-element inside the cat-di…

…alog (#570)
haiilo · Sep 26, 2024 · 71d62d1 · 71d62d1
1 parent 50614d0
commit 71d62d1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 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
@@ -11,12 +11,20 @@
     [attachToElement]="true"
   >
   </cat-datepicker>
-  <p>
-    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-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
@@ -32,6 +40,8 @@
   <cat-dialog-actions>
     <cat-button variant="text" class="cat-mr-auto">Tertiary</cat-button>
     <cat-button>Secondary</cat-button>
-    <cat-button variant="filled" color="primary">Primary</cat-button>
+    <cat-tooltip content="Primary">
+      <cat-button variant="filled" color="primary">Primary</cat-button>
+    </cat-tooltip>
   </cat-dialog-actions>
 </cat-dialog>
diff --git a/angular/projects/catalyst/src/lib/dialog/dialog.component.scss b/angular/projects/catalyst/src/lib/dialog/dialog.component.scss
@@ -9,6 +9,8 @@
 }
 
 .cat-dialog-pane {
+  transform: translateZ(0);
+
   .cdk-dialog-container > *:only-child {
     display: block;
     width: 100%;