CDK Overlay is ignoring 'height' and 'width' configs

[AsafAgranat]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

CDK overlay panel should get inline width and height properties defined by the 'width' and 'height' entries in the config.

What is the current behavior?

The overlay panel is rendered without any width or height. The 'height' property is defined in overlayConfig: https://github.com/angular/material2/blob/master/src/cdk/overlay/overlay-config.ts, and is also documented in the the Overlay API

What are the steps to reproduce?

1. Go to: https://stackblitz.com/edit/custom-overlay-step-2-mo6xro?file=app/file-preview-overlay.service.ts
2. Click on one of the eye icons in the rendered app area.
3. Inspect the overlay pane and see that it is receiving the 'max-width' property, but the 'height' property is missing, although it has been defined in the config.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.1.3, cdk 5.0.3, Typescript 2.6.2, windows 10, Chrome v63

Is there anything else we should know?

Your work and effort is much appreciated here!

[crisbeto]

I think this is a result of both the OverlayRef and the GlobalPositionStrategy having a width property for some historical reasons. The one in the GlobalPositionStrategy ends up overriding the one from the OverlayRef. I'll submit a fix, but until it gets in you should be able to work around it like this:

this.overlay.position()
      .global()
      .centerHorizontally()
      .centerVertically()
      .width('300px');

[AsafAgranat]

@crisbeto - good workaround. Thanks!

Although when I tried it in the same order of methods that you wrote, .centerHorizontally() and .centerVertically() were ignored - the result was that the overlay-wrapper's inlined flex properties were flex-start on both vertical and horizontal.
But once I moved the width before .centerHorizontally() and .centerVertically(), the result was a dialog properly centered.

    ....     
    .width('300px');
    .centerHorizontally()
    .centerVertically()

Not sure why it's like that

The workaround is great, but how one should do with a flexibleConnectedTo position ? Nothing offers a width function ...

this.overlay
      .position()
      .flexibleConnectedTo(anchor)
      .withPositions(positions);