Issue #26 was closed but never fixed?

[beckula]

Hi Polymer team.
Issue #26 (When used in a small dialog, dropdown doesnt layer outside the dialog.) was closed but I don't see any fix applied. The closure statement says that a 'layered' property will be available in the "next release", but it's nearly a year later and I don't see it.

I have a dialog of my own, and paper-dropdown-menu content is always truncated if it's taller than the height of my dialog. Either it should overlay the dialog, ending at the bottom of the viewport, or end at the bottom of the the dialog.

Thanks,
-Becky

[beckula]

I was able to solve this with a custom dialog. The 'layers' property sounds nice, though... :)

[leonhsu1]

I'm having trouble with this too. Beckula how did you solve this issue with your custom dialog?

[beckula]

I scrapped paper-dialog and used a combination of a CSS fixed parent with absolutely positioned children. To avoid CSS transformations (which produce fuzzy text in Chrome) I came to terms with the fact that the dialog had to be a fixed distance from the edge of the viewport in order to keep things simple and look good in any size browser and during a resize.

It essentially looks like the code below. Setting overflow: visible; on the dialog allows drop-downs to extend beyond it (to the edge of the viewport). The body section is scrollable and is at an absolutely positioned height starting where the header leaves off and ending where the footer begins. Apply the css class 'visible' to the overlay and dialog to show them.

<style>
/* modal backdrop. */
#overlay {
    background-color: rgba(0, 0, 0, .5);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 980;
}

#overlay.visible {
    display: block;
    z-index: 989;
}

#dialog {
    bottom: 5vh;
    display: none;
    left: 4vw;
    /* Allows dropdowns inside the dialog to extend past it */
    overflow: visible;
    position: fixed;
    right: 4vw;
    top: 4vh;
    z-index: 990;
}

#dialog.visible {
  display: block;
  z-index: 991;
}

#dialog header {
  box-sizing: border-box;
  height: 55px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#dialog .body {
  bottom: 55px; /* footer height */
  left: 0;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 55px;  /* header height */
}

#dialog footer {
  bottom: 0;
  box-sizing: border-box;
  height: 55px;
  left: 0;
  padding-right: 10px;
  position: absolute;
  right: 0;
}
</style>

<template>
  <div id="overlay"></div>
  <section id="dialog">
      <header>
      </header>
      <div class="body">
      </div>
     <footer>
     </footer>
 </section>
</template>

[ashsny]

Looks like this was dropped in the transition from 0.5 to 1.0.