Mit Polymer 1.1 habe ich zwei Probleme mit paper-header-panel

  1. Ich kann den Inhalt unter dem Panel nicht anzeigen
  2. Ich kann das height: 2000px; nicht auf das div anwenden, also ich kann eine Bildlaufleiste haben, um den Wasserfalleffekt zu erzielen.

Ich habe https://github.com/PolymerElements/ verwendet. paper-header-panel / blob / master / demo / index.html als Beispiel.

Nach einigen Fehlerbehebungen hat div id="mainContainer" die Höhe 0. Wenn Sie den Flex aus der Klasse entfernen, wird die Höhe angewendet. Aber dann bricht dies den scrollenden Wasserfall-Effekt.

<dom-module id="custom-paper-header-panel">

  <template>
  <style>
    #foobar {
      height: 2000px;
    }
  </style>

    <paper-header-panel mode="waterfall-tall">
      <paper-toolbar>
        <div class='title'></div>
        <paper-tabs>
          <paper-tab>
            <div>contact</div>
          </paper-tab>
        </paper-tabs>
        <div class='title bottom'>
          <h1 id="name-title">foo</h1>
        </div>
      </paper-toolbar>
      <div id="foobar">
          <h2>This isn't being shown</h2>
      </div>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: "custom-paper-header-panel"
    });
  </script>
</dom-module>
0
dman 17 Aug. 2015 im 03:50

3 Antworten

Beste Antwort

Dein Element sieht gut aus. Das Problem wird wahrscheinlich dadurch verursacht, dass auf Ihrem auf Ihrer Seite definierten custom-paper-header-panel -Element kein Height angewendet wird.

Versuchen Sie es fit.

<custom-paper-header-panel class="fit"></custom-paper-header-panel>

In diesem Plunker finden Sie ein funktionierendes Beispiel.

2
Justin XL 17 Aug. 2015 im 02:55

Ich denke, das ist ein Fehler in Polymer. Wenn Sie <!DOCTYPE html> oben auf der Seite haben, funktioniert das Papier-Header-Panel nicht.

Versuchen Sie, die Doctype-Deklaration zu entfernen. Es löst mein Problem.

0
Ian Wong 22 Feb. 2016 im 03:19

Antworten:

Ich denke, die Dokumentation ist diesbezüglich nicht genau klar, da sie die meisten Beispiele ohne die folgenden Attribute enthält ... aber wenn Sie einen vollständigen Header wünschen (was wahrscheinlich 99% der Zeit ist), sind Sie es soll verwenden:

<body class="fullbleed layout vertical">
    <paper-header-panel  class="flex">
0
dman 18 Aug. 2015 im 02:04