Skip to content

Setting maxHeight on overlay with flexibleConnectedTo strategy does not work, when viewport margin is also configured #17567

Open
@alexbjorlig

Description

@alexbjorlig

Reproduction

Steps to reproduce:

  1. Visit the stackblitz
  2. Click the 2 buttons

Expected Behavior

That the max height of 300px is respected in both cases

Actual Behavior

Max height is only respected, if withViewportMargin(10) is not configured.

Environment

  • Angular: 8.2.13
  • CDK/Material: 8.2.3
  • Browser(s): Version 78.0.3904.70 (Official Build) (64-bit)
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS Mojave

Gif

bug-2

Relevant code

const overlayRef = this.overlay.create({
      hasBackdrop: true,
      positionStrategy: this.overlay.position().flexibleConnectedTo(element)

      // The max height is only respected, if the viewport margin is left out
      .withViewportMargin(10) // <------

      .withPositions([
        {
          originX: 'end',
          originY: 'bottom',
          overlayX: 'end',
          overlayY: 'top',
        },
      ]),
      width: '200px',
      maxHeight: '300px',
    });

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/overlay

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions