8

I have some simple code (Angular2 + Polymer) that creates a paper-input with a iron-icon as a suffix icon:

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

Here is the full page, note that the materialize grid and row classes are the only materialize classes I brought into the project:

<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>

This looks pretty good on page load:

enter image description here

When I navigate away from the page and back, however, the icon falls below the input:

enter image description here

In the html you can clearly see that the icon is placed outside of the paper-input-container on navigation.

Has anyone seen this before? I am at a loss. One thing to note is this only happens when I use webcomponents-lite.js in my index.html file. webcomponents.js has other issues when used (shouldn't be used) but this is not one of them. This is Polymer 1.0. Thanks!

Edit:

This is not an issue in Chrome, but in the other major browsers.

Here are my imports in case they are relevant:

    <!-- 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">

Here are my bower.json dependencies:

"dependencies": {
    "webcomponentsjs": "~0.7.21",
    "polymer": "Polymer/polymer#~1.3.0",
    "paper-elements": "PolymerElements/paper-elements#~1.0.7"
  }
Sloth Armstrong
  • 1,066
  • 2
  • 19
  • 39
  • I can't reproduce this bug... On my site the `iron-icon` stays on it's position in the `paper-input` when switching pages. Is your polymer and the elements up-to-date? Can you post more code? – Jokus Mar 02 '16 at 13:36
  • @Jokus Thanks for looking into this. I added my `bower.json` dependencies and the rest of the relevant template code. Let me know if having the angular routing and component code would help as well. One important thing to note that I just realized is this is a non-issue in Chrome, but affects Firefox, Safari, and IE. – Sloth Armstrong Mar 02 '16 at 14:21
  • 2
    Why are you using webcomponents-lite.js when you set Polymer to use native shadow dom? Shadow DOM is only currently supported in chrome you know. – Neil John Ramal Mar 05 '16 at 08:06
  • As far as I can tell shadow dom is required for Chrome to render the components correctly. Without it Chrome breaks completely and the icon issue still exists in other browsers. If that's wrong then something else is going on there. – Sloth Armstrong Mar 05 '16 at 14:38
  • 1
    Perhaps if you posted a [Plunker](http://plnkr.co/) or [Codepen](http://codepen.io/)? – Trevor Mar 09 '16 at 18:19

1 Answers1

0
<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>
Gomes
  • 3,330
  • 25
  • 17