Fixes #98: Adding Vertical and Horizontal offset

demo/index.html

@@ -96,7 +96,7 @@ <h4>You can pre-select a value using the <i>selected</i> attribute</h4>
     <h4>You can change the direction in which the menu opens</h4>
     <demo-snippet class="centered-demo">
       <template>
-        <paper-dropdown-menu label="Upwards and to the left!" vertical-align="bottom" horizontal-align="left">
+        <paper-dropdown-menu label="Offset down and right!" vertical-align="bottom" horizontal-align="left">
           <paper-listbox slot="dropdown-content" class="dropdown-content">
             <paper-item>allosaurus</paper-item>
             <paper-item>brontosaurus</paper-item>
@@ -105,7 +105,7 @@ <h4>You can change the direction in which the menu opens</h4>
           </paper-listbox>
         </paper-dropdown-menu>
 
-        <paper-dropdown-menu-light label="Upwards and to the left! (light)" vertical-align="bottom" horizontal-align="left">
+        <paper-dropdown-menu-light label="Offset down and right! (light)" vertical-align="bottom" horizontal-align="left">
           <paper-listbox slot="dropdown-content" class="dropdown-content">
             <paper-item>allosaurus</paper-item>
             <paper-item>brontosaurus</paper-item>
@@ -116,6 +116,28 @@ <h4>You can change the direction in which the menu opens</h4>
       </template>
     </demo-snippet>
 
+    <h4>You can apply offset to the menu position</h4>
+    <demo-snippet class="centered-demo">
+      <template>
+        <paper-dropdown-menu label="Upwards and to the left!" vertical-offset="64" horizontal-offset="-32">
+          <paper-listbox slot="dropdown-content" class="dropdown-content">
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu>
+
+        <paper-dropdown-menu-light label="Upwards and to the left! (light)" vertical-offset="64" horizontal-offset="-32">
+          <paper-listbox slot="dropdown-content" class="dropdown-content">
+            <paper-item>allosaurus</paper-item>
+            <paper-item>brontosaurus</paper-item>
+            <paper-item>carcharodontosaurus</paper-item>
+            <paper-item>diplodocus</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu-light>
+      </template>
+    </demo-snippet>
 
     <h4>A paper-dropdown-menu can be disabled</h4>
     <demo-snippet class="centered-demo">

paper-dropdown-menu-light.html

@@ -286,7 +286,8 @@
       id="menuButton"
       vertical-align="[[verticalAlign]]"
       horizontal-align="[[horizontalAlign]]"
-      vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
+      vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat,verticalOffset)]]"
+      horizontal-offset="[[horizontalOffset]]"
       disabled="[[disabled]]"
       no-animations="[[noAnimations]]"
       on-iron-select="_onIronSelect"
@@ -440,6 +441,28 @@
             value: 'top'
           },
 
+          /**
+           * A pixel value that will be added to the position calculated for the
+           * given `horizontalAlign`. Use a negative value to offset to the
+           * left, or a positive value to offset to the right.
+           */
+           horizontalOffset: {
+            type: Number,
+            value: 0,
+            notify: true
+          },
+
+          /**
+           * A pixel value that will be added to the position calculated for the
+           * given `verticalAlign`. Use a negative value to offset towards the
+           * top, or a positive value to offset towards the bottom.
+           */
+          verticalOffset: {
+            type: Number,
+            value: 0,
+            notify: true
+          },
+
           hasContent: {
             type: Boolean,
             readOnly: true
@@ -558,12 +581,12 @@
          * @param {boolean} noLabelFloat True if the label should not float
          * above the input, otherwise false.
          */
-        _computeMenuVerticalOffset: function(noLabelFloat) {
+        _computeMenuVerticalOffset: function(noLabelFloat, verticalOffset) {
           // NOTE(cdata): These numbers are somewhat magical because they are
           // derived from the metrics of elements internal to `paper-input`'s
           // template. The metrics will change depending on whether or not the
           // input has a floating label.
-          return noLabelFloat ? -4 : 8;
+          return verticalOffset + (noLabelFloat ? -4 : 8);
         },
 
         /**

paper-dropdown-menu.html

@@ -91,7 +91,8 @@
       vertical-align="[[verticalAlign]]"
       horizontal-align="[[horizontalAlign]]"
       dynamic-align="[[dynamicAlign]]"
-      vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
+      vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat, verticalOffset)]]"
+      horizontal-offset="[[horizontalOffset]]"
       disabled="[[disabled]]"
       no-animations="[[noAnimations]]"
       on-iron-select="_onIronSelect"
@@ -271,6 +272,28 @@
             type: Boolean
           },
 
+          /**
+           * A pixel value that will be added to the position calculated for the
+           * given `horizontalAlign`. Use a negative value to offset to the
+           * left, or a positive value to offset to the right.
+           */
+           horizontalOffset: {
+            type: Number,
+            value: 0,
+            notify: true
+          },
+
+          /**
+           * A pixel value that will be added to the position calculated for the
+           * given `verticalAlign`. Use a negative value to offset towards the
+           * top, or a positive value to offset towards the bottom.
+           */
+          verticalOffset: {
+            type: Number,
+            value: 0,
+            notify: true
+          },
+
           /**
            * Whether focus should be restored to the dropdown when the menu closes.
            */
@@ -391,12 +414,12 @@
          * @param {boolean} noLabelFloat True if the label should not float
          * above the input, otherwise false.
          */
-        _computeMenuVerticalOffset: function(noLabelFloat) {
+        _computeMenuVerticalOffset: function(noLabelFloat, verticalOffset) {
           // NOTE(cdata): These numbers are somewhat magical because they are
           // derived from the metrics of elements internal to `paper-input`'s
           // template. The metrics will change depending on whether or not the
           // input has a floating label.
-          return noLabelFloat ? -4 : 8;
+          return verticalOffset + (noLabelFloat ? -4 : 8);
         },
 
         /**