diff --git a/libs/barista-components/context-dialog/src/context-dialog.scss b/libs/barista-components/context-dialog/src/context-dialog.scss
index c3aa927d6b..66ca9c930e 100644
--- a/libs/barista-components/context-dialog/src/context-dialog.scss
+++ b/libs/barista-components/context-dialog/src/context-dialog.scss
@@ -18,7 +18,6 @@ $context-dialog-top-header-padding: 8px;
position: relative;
transform-origin: top right;
color: #ffffff;
- max-height: 90vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
diff --git a/libs/barista-components/context-dialog/src/context-dialog.spec.ts b/libs/barista-components/context-dialog/src/context-dialog.spec.ts
index 606b26bbda..9f37b4373b 100644
--- a/libs/barista-components/context-dialog/src/context-dialog.spec.ts
+++ b/libs/barista-components/context-dialog/src/context-dialog.spec.ts
@@ -49,7 +49,7 @@ import {
} from '@dynatrace/barista-components/core';
import {
DT_CONTEXT_DIALOG_CONFIG,
- _DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH,
+ _DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS,
} from './context-dialog';
describe('DtContextDialog', () => {
@@ -425,24 +425,7 @@ describe('DtContextDialog', () => {
.getContainerElement()
.querySelector('.cdk-overlay-pane');
expect(cdkOverlayPane?.getAttribute('style')).not.toContain(
- `max-width: ${_DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH}px`,
- );
- }),
- );
-
- it(
- 'should have no maxWidth set if it is explicitly removed from the config',
- waitForAsync(() => {
- configureDtContextDialogTestingModule([BasicContextDialog]);
-
- const fixture = createComponent(BasicContextDialog);
- fixture.componentInstance.contextDialog.open();
- fixture.detectChanges();
- const cdkOverlayPane = overlayContainer
- .getContainerElement()
- .querySelector('.cdk-overlay-pane');
- expect(cdkOverlayPane?.getAttribute('style')).toContain(
- `max-width: ${_DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH}px`,
+ `max-width: ${_DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS.maxWidth}`,
);
}),
);
diff --git a/libs/barista-components/context-dialog/src/context-dialog.ts b/libs/barista-components/context-dialog/src/context-dialog.ts
index 5a410c84f2..713a535caa 100644
--- a/libs/barista-components/context-dialog/src/context-dialog.ts
+++ b/libs/barista-components/context-dialog/src/context-dialog.ts
@@ -59,9 +59,20 @@ import {
DT_UI_TEST_CONFIG,
DtUiTestConfiguration,
dtSetUiTestAttribute,
+ isDefined,
} from '@dynatrace/barista-components/core';
-
import { DtContextDialogTrigger } from './context-dialog-trigger';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+
+/** Controls the sizing of the overlay element within the cdk overlay */
+type DtContextDialogOverlayConstraint = {
+ maxWidth?: string;
+ minWidth?: string;
+ width?: string;
+ maxHeight?: string;
+ minHeight?: string;
+ height?: string;
+};
const LOG: DtLogger = DtLoggerFactory.create('ContextDialog');
const OVERLAY_POSITIONS: ConnectedPosition[] = [
@@ -111,8 +122,9 @@ export const DT_CONTEXT_DIALOG_CONFIG = new InjectionToken(
'dt-context-dialog-config',
);
-/** The default max-width for the context dialogs overlay */
-export const _DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH = 328;
+export const _DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS = {
+ maxWidth: '328px',
+};
@Component({
selector: 'dt-context-dialog',
@@ -199,6 +211,8 @@ export class DtContextDialog
return this._trigger && this._trigger !== this._defaultTrigger;
}
+ _overlayConstraints: DtContextDialogOverlayConstraint = _DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS;
+
constructor(
private _overlay: Overlay,
private _viewContainerRef: ViewContainerRef,
@@ -217,6 +231,34 @@ export class DtContextDialog
) {
super();
this.tabIndex = parseInt(tabIndex, 10) || 0;
+
+ if (this._userConfig) {
+ const customConstraints: DtContextDialogOverlayConstraint = {
+ maxWidth: isDefined(this._userConfig.maxWidth)
+ ? coerceCssPixelValue(this._userConfig.maxWidth)
+ : undefined,
+ minWidth: isDefined(this._userConfig.minWidth)
+ ? coerceCssPixelValue(this._userConfig.minWidth)
+ : undefined,
+ width: isDefined(this._userConfig.width)
+ ? coerceCssPixelValue(this._userConfig.width)
+ : undefined,
+ maxHeight: isDefined(this._userConfig.maxHeight)
+ ? coerceCssPixelValue(this._userConfig.maxHeight)
+ : undefined,
+ minHeight: isDefined(this._userConfig.minHeight)
+ ? coerceCssPixelValue(this._userConfig.minHeight)
+ : undefined,
+ height: isDefined(this._userConfig.height)
+ ? coerceCssPixelValue(this._userConfig.height)
+ : undefined,
+ };
+
+ this._overlayConstraints = {
+ ..._DT_CONTEXT_DIALOG_DEFAULT_CONSTRAINTS,
+ ...JSON.parse(JSON.stringify(customConstraints)),
+ };
+ }
}
ngAfterViewInit(): void {
@@ -311,32 +353,39 @@ export class DtContextDialog
scrollStrategy: this._overlay.scrollStrategies.block(),
backdropClass: 'cdk-overlay-transparent-backdrop',
hasBackdrop: true,
- maxWidth: _DT_CONTEXT_DIALOG_DEFAULT_MAX_WIDTH,
};
const overlayConfig = this._userConfig
? { ...defaultConfig, ...this._userConfig }
: defaultConfig;
- const hasFlexibleDimensions =
- overlayConfig?.maxWidth === undefined &&
- overlayConfig?.maxHeight === undefined;
-
const positionStrategy = this._overlay
.position()
.flexibleConnectedTo(this._trigger.elementRef)
.withPositions(OVERLAY_POSITIONS)
.setOrigin(this._trigger.elementRef)
- // We need to falsify the flexibleDimension here in case a maxWidth is set
- // https://github.com/angular/components/blob/master/src/cdk/overlay/position/flexible-connected-position-strategy.ts#L914
- .withFlexibleDimensions(hasFlexibleDimensions)
+ .withFlexibleDimensions(true)
.withPush(false)
.withGrowAfterOpen(false)
.withViewportMargin(0)
.withLockedPosition(false);
overlayConfig.positionStrategy = positionStrategy;
- this._overlayRef = this._overlay.create(overlayConfig);
+ /**
+ * Remove the constraint properties from the config passed to the overlay create
+ * method since setting one of these properties disables the flexibleDimensions and we
+ * actually want that to still be the case.
+ */
+ const {
+ width,
+ height,
+ minWidth,
+ maxWidth,
+ minHeight,
+ maxHeight,
+ ...remainingConfig
+ } = overlayConfig;
+ this._overlayRef = this._overlay.create(remainingConfig);
dtSetUiTestAttribute(
this._overlayRef.overlayElement,