Question

我正在使用纸质菜单按钮，当我向菜单添加内容时，我会看到滚动条显示。我有2个问题

任何人都知道我怎么能纠正这个？
我会在哪里添加纸张阴影，让它显示在菜单下而不是按钮下。

包括下面的图片以及我的菜单代码。

enter image description here

      <paper-menu-button icon="more-vert">
        <paper-item id="edit" icon="create" label="Edit"></paper-item>
        <paper-item id="delete" icon="remove-circle" label="Delete"></paper-item>
      </paper-menu-button>

Answer 1

滚动条看起来像一个bug。您可以使用以下CSS暂时更正它：

body /deep/ core-menu {
    overflow: hidden !important;
}

Answer 2

我很难模仿下拉菜单周围的阴影，如纸张菜单按钮演示所示：

Polymer paper-menu-button demo

知道什么属性/属性或CSS样式可以实现这一点？你提到确保菜单按钮有位置：相对，但这对我没有用（它已经是相对的）。

根据要求，这是代码的精简部分。注意我选择不使用纸张阴影作为容器：

<polymer-element name="my-element">
<template>
    <style>

        myContainer {
            padding-top: 10px;
            padding-right: 25px;
            padding-left: 25px;
            padding-bottom: 10px;
            margin-top: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50);
            /* z-index: -1; */
        }

        myHeading {
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 0px;
            /*padding-bottom: 10px;
            padding-top: 10px;*/
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.50);
            text-align: center;
            background-color: lightgrey;
            color: black;
            font-weight: 700;
            /* z-index: -1; */
        }

    </style>

    <!--paper-shadow></paper-shadow-->

    <core-selector id="mySelector" target="{{$.myContainers}}" multi="false" selected="{{selectedContainer}}" selectedAttribute="active"></core-selector>

    <div id="myContainers" horizontal layout wrap>

        <div>
            <myHeading name="Container 1" horizontal layout center>
                <div flex>Container 1</div>
                <paper-menu-button icon="more-vert" halign="right">
                    <paper-item label="Edit" on-tap="{{ editItem }}"></paper-item>
                    <paper-item label="Copy"></paper-item>
                </paper-menu-button>
            </myHeading>
            <myContainer vertical layout>
                Container contents here
            </myContainer>
        </div>

纸张菜单按钮下拉列表有滚动条？

2 个答案: