Question

我有一些简单的代码（Angular2 + Polymer）可以创建paper-input iron-icon作为suffix图标：

 <paper-input type="text" [control]="email" label="Email">
       <iron-icon suffix icon="mail"></iron-icon>
 </paper-input>

这是完整页面，请注意，实体化网格和行类是我带入项目的唯一实现类：

<div class="section">
    <h1 class="paper-font-headline">Admin Registration</h1>

    <div class="row">
        <div class="col s12 m6 6">
            <p class="paper-font-body2">some stuff here</p>
        </div>

        <div class="col s12 m6 6">
            <paper-card class="stretch">
                <div class="sub-section">
                    <form>
                        <paper-input type="text"
                                     [control]="email"
                                     label="Email">
                            <iron-icon suffix icon="mail"></iron-icon>
                        </paper-input>
                    </form>
                </div>
            </paper-card>
        </div>
    </div>
</div>

这在页面加载上看起来相当不错：

然而，当我离开页面并返回时，图标会低于输入：

在html中，您可以清楚地看到图标位于导航上的paper-input-container之外。

有没有人见过这个？我很茫然。需要注意的一点是，只有在我的index.html文件中使用webcomponents-lite.js时才会发生这种情况。使用时webcomponents.js还有其他问题（不应该使用），但这不是其中之一。这是Polymer 1.0。谢谢！

修改

这是不 Chrome中的一个问题，但在其他主流浏览器中。

以下是我相关的导入：

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <script>
        window.Polymer = window.Polymer || {};
        window.Polymer.dom = 'shadow';
    </script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>

    <link rel="import" href="bower_components/paper-styles/classes/global.html">
    <link rel="import" href="bower_components/paper-styles/classes/shadow.html">
    <link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html">
    <link rel="import" href="bower_components/paper-styles/classes/typography.html">

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/paper-menu/paper-menu.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-ripple/paper-ripple.html">
    <link rel="import" href="bower_components/paper-card/paper-card.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">

以下是我的bower.json依赖项：

"dependencies": {
    "webcomponentsjs": "~0.7.21",
    "polymer": "Polymer/polymer#~1.3.0",
    "paper-elements": "PolymerElements/paper-elements#~1.0.7"
  }

Answer 1

<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icon/core-icon.html">

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

  <template>
    <style>    
      #paper_input {
        left: 380px;
        top: 380px;
        position: absolute;
      }
      #core_icon {
        left: 530px;
        top: 390px;
        position: absolute;
      }
    </style>
    <paper-input label="Type something..." id="paper_input"></paper-input>
    <core-icon icon="mail" id="core_icon"></core-icon>
  </template>

  <script>

    Polymer({

    });

  </script>

</polymer-element>

为什么我的聚合物铁图标出现在导航的纸张输入下方？

1 个答案: