Merge pull request #2660 from IDEMSInternational/fix/pop-up-clos-butt…

…on-rtl fix: pop-up close button position for RTL languages
IDEMSInternational · Dec 31, 2024 · 27b76dd · 27b76dd
2 parents a859eb4 + 6d5dd8a
commit 27b76dd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -2,13 +2,15 @@
   class="popup-backdrop"
   (click)="dismissOnBackdrop($event)"
   [attr.data-fullscreen]="props.fullscreen ? true : null"
-  [dir]="templateTranslateService.languageDirection()"
   [attr.data-variant]="props.variant ? props.variant : null"
+  [dir]="templateTranslateService.languageDirection()"
 >
   <div class="popup-container">
-    <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
-      <ion-icon slot="icon-only" name="close"></ion-icon>
-    </div>
+    @if (props.showCloseButton) {
+      <div (click)="dismiss()" class="close-button" fill="clear">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </div>
+    }
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
       @if (props.popupText) {
         <!-- Use a text component row to display popup text -->

diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.scss b/src/app/shared/components/template/components/layout/popup/popup.component.scss
@@ -20,7 +20,7 @@
     }
     .close-button {
       top: 10px;
-      right: 10px;
+      inset-inline-end: 10px;
     }
   }
   .popup-content {
@@ -44,7 +44,6 @@
   .close-button {
     position: absolute;
     top: 18px;
-    right: 19px;
     background: white;
     width: 40px;
     height: 40px;
@@ -58,5 +57,7 @@
     z-index: 1;
     box-shadow: var(--ion-default-box-shadow);
     color: var(--ion-color-primary);
+    // align 18px from end (varies with rtl/ltr direction)
+    inset-inline-end: 18px;
   }
 }