Mowzer Mowzer - 1 month ago 28
CSS Question

Polymer 1.x: How to position paper menu

Question




How do I position
<paper-menu>
element relative to
<paper-menu-button>
(or
<paper-button>
) 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
<paper-menu>
to index its position relative to the
<paper-menu-button>
which controls it? (Alternatively, the
<paper-button>
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?




Code



http://jsbin.com/xaladokimu/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<template>
<style>
paper-menu-button{
--paper-menu-button-dropdown:{
max-width: 100%;
right:70vw;
};
}
paper-item{
--paper-item:{
white-space: nowrap;
width: 100%;
};
}
</style>
<paper-header-panel class="flex">
<paper-toolbar>
<span class="flex"></span>
<paper-menu-button>
<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>
</paper-menu>
</paper-menu-button>
</paper-toolbar>
<div class="fit">Content goes here...</div>
</paper-header-panel>
</template>
<script>
(function(){
Polymer({
is: 'x-element'
});
})();
</script>
</dom-module>
</body>
</html>

Answer

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

See this JSBin.