fix: flyout vertical positioning (#2771)

adjusts logic for setting height on the flyout to only apply a set height on the second pass if necessary. this ensures that any content in the flyout is given a chance to render and contribute to the flyout height before an fixed height is applied to the flyout.
microsoftgraph · Oct 12, 2023 · 45163ed · 45163ed
1 parent 388be6e
commit 45163ed
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts b/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
@@ -418,7 +418,9 @@ export class MgtFlyout extends MgtBaseComponent {
         window.requestAnimationFrame(() => this.updateFlyout());
       }
 
-      if (height) {
+      // don't use the calculated height on the first pass as the contents of the flyout may not have rendered yet
+      // this gives them a change to contribute height and not get forced to a smaller than intended height
+      if (height && !firstPass) {
         flyout.style.maxHeight = `${height}px`;
         flyout.style.setProperty('--mgt-flyout-set-height', `${height}px`);
       } else {

diff --git a/packages/mgt-element/src/utils/version.ts b/packages/mgt-element/src/utils/version.ts
@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '3.1.2';
+export const PACKAGE_VERSION = '3.1.3';