Mowzer Mowzer - 2 months ago 40
CSS Question

Polymer 1.x: How to position paper menu


How do I position
element relative to
) that controls it and expand the menu to the left upon dropdown in order to prevent contents from going off screen?
(Please provide a working JSFiddle or JSBin example.)

For example, in this JSBin how do I get the
to index its position relative to the
which controls it? (Alternatively, the
will also suffice.)

In other words, no matter the width of the viewport, I want the menu to always dropdown relative to an edge of the button controlling it and expand its width moving the left across the screen. (To prevent the menu content from flowing off the screen or out of the viewport's right edge.) What code accomplishes this?


<!DOCTYPE html>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="">
<link rel="import" href="all-elements.html">
<dom-module id="x-element">
max-width: 100%;
white-space: nowrap;
width: 100%;
<paper-header-panel class="flex">
<span class="flex"></span>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>This is a long label for the paper menu and button to show</paper-item>
<paper-item>This is another long label for the paper menu and button</paper-item>
<paper-item>This is still yet another long label for the paper menu</paper-item>
<div class="fit">Content goes here...</div>
is: 'x-element'


Remove right:70vw; and add horizontal-align="right" to your paper-menu-button.

See this JSBin.