Setting positionTarget but dialog not positioning correctly, getting cropped

[halloweenman]

Description

After clicking on a div element containing text, positionTarget is set to that div element and dialog is then opened. Most of the time it works fine but when the div element is located near the bottom of the window then the dialog gets cropped and is not fully displayed inside widow. I would expect the dialog to be fully displayed inside the window but it is not. See image below, the highlighted yellow is the div element that positionTarget is set to.

Here's the code:

<style>
      #pdselector {
        margin: 0;
        overflow: auto;
      }
</style>

<paper-dialog id="pdselector" horizontal-align="right" vertical-align="auto" dynamic-align="true">

        <div role="listbox">
          <button class="paper-item" role="option">Edit</button>
          <button class="paper-item" role="option">Add new</button>
          <button class="paper-item" role="option">Move up</button>
          <button class="paper-item" role="option">Move down</button>
          <button class="paper-item" role="option">Delete</button>
          <button class="paper-item" role="option">Cancel</button>
        </div>
</paper-dialog>

Expected outcome

Dialog fully displayed inside window.

Actual outcome

Dialog getting cropped and is not fully displayed inside window.

Browsers Affected

• [ x] iPhone 5
• [ x] Chrome
• [ x] Firefox
• [ x] Safari 9
• [ x] Safari 8
• [ x] Safari 7
• [ x] Edge
• [ x] IE 11
• [ x] IE 10

[valdrinkoshi]

Part of the highlighted div element is placed outside the viewport, but paper-dialog will still be rendered within the viewport respecting the min-height value. It should be possible for the user to scroll the contents of the dialog in that situation.

This behavior is implemented in iron-fit-behavior, there is a useful demo page to reproduce this issue in https://www.webcomponents.org/element/PolymerElements/iron-fit-behavior/demo/demo/index.html

Notice how the min-height is respected, the element is always kept on screen, and the contents are scrollable:

[halloweenman]

Much appreciated, many thanks for the useful info.