Fix load panel position (#201)

DevExpress · Nov 7, 2023 · d83f3d5 · d83f3d5
1 parent 3714cc4
commit d83f3d5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/app/preview/overlays/overlays.component.css b/src/app/preview/overlays/overlays.component.css
@@ -11,8 +11,7 @@
 }
 
 :host ::ng-deep  .dx-button:not(.dx-closebutton) {
-    margin-right: 30px;
-    margin-bottom: 10px;
+    margin: 0 15px 10px 15px;
 }
 
 :host ::ng-deep .dx-overlay-wrapper.dx-toast-wrapper {
@@ -41,7 +40,7 @@
 #target-block {
     display: inline-block;
     text-align: center;
-    padding: 100px 0 50px;
+    padding: 120px 0 50px;
     height: 200px;
     width: 100%;
 }

diff --git a/src/app/preview/overlays/overlays.component.html b/src/app/preview/overlays/overlays.component.html
@@ -49,10 +49,9 @@
         <dx-button text="ActionSheet" width="135" type="normal" (onClick)="actionSheet.visible = true"></dx-button>
         <dx-button id="tooltip-button" width="135" text="Tooltip" type="normal" (onClick)="tooltip.visible = true"></dx-button>
     </div>
-
+    <div id="loadpanel-target-expanded"></div>
     <div id="target-block">
         <div id="target-element"></div>
-        <div id="loadpanel-target"></div>
     </div>
 
     <dx-popup #popup 
@@ -70,7 +69,7 @@
         [shading]="false"
         (onHiding)="hiding($event)"
         container="#target-block"
-        [position]="{ of: '#loadpanel-target', at: 'center', my: 'center' }">
+        [position]="{ of: ofValue, at: 'center', my: 'center' }">
     </dx-load-panel>
     <dx-action-sheet #actionSheet [dataSource]="actionSheetData" [visible]="false"></dx-action-sheet>
     <dx-tooltip #tooltip  target="#tooltip-button" position="top" [visible]="false"> 

diff --git a/src/app/preview/overlays/overlays.component.ts b/src/app/preview/overlays/overlays.component.ts
@@ -18,6 +18,8 @@ export class OverlaysComponent implements OnInit, OnDestroy {
     isExpanded = new BehaviorSubject<boolean>(false);
     isExpandedValue = false;
 
+    ofValue = '#loadpanel-target';
+
     actionSheetData: any[] = [
         { text: 'Command 1' },
         { text: 'Command 2' },
@@ -35,13 +37,14 @@ export class OverlaysComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
-        this.subscription = this.isExpanded.subscribe(() => {
+        this.subscription = this.isExpanded.subscribe((value) => {
             const flexContainer = document.getElementsByTagName('app-overlays')[0].parentElement.parentElement;
             flexContainer.addEventListener('transitionend', () => {
                 if(this.tooltip) this.tooltip.instance.repaint();
                 if(this.toast) this.toast.instance.repaint();
                 if(this.loadPanel) this.loadPanel.instance.repaint();
             }, false);
+            this.ofValue = value ? '#loadpanel-target-expanded' : '#loadpanel-target';
         });
     }