CODEWITHSUNDEEP
polymerpolymer-1.0
dman
dman

Reputation: 11064

paper-drawer-panel causes Y scrollbar not to scroll to the bottom of viewport

When I use paper-drawer-panel, the viewport is not correct. As shown in the first screen shot, the Y scroll bar is there as it should be....but the bottom of the viewport does not equal the end/bottom of the y scrollbar. In otherwards, there is still a portion of the content not showing that is hidden.

If I remove paper-drawer-panel, then everything is good and the Y scroll bar scrolls to the bottom of the viewport.

This is in index.html.

Bad - with paper-drawer-panel:

paper-drawer-panel messes up bottom of viewport

  <template is="dom-bind" id="app">
    <paper-drawer-panel force-narrow="true">
      <div drawer>
        <drawer-custom></drawer-custom>
      </div>
      <div main>
        <div id="header-v-center">
          <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
          </paper-icon-button>
          <div id="header-text-middle">SPICES OF THE WORLD</div>
          <div id="header-text-right">A SPECIAL EDITION! </div>
        </div>
        <div id="video-player-header" onclick="page('/home')" style="display: none">
          <div>
            <iron-icon icon="icons:arrow-back"></iron-icon>
          </div>
        </div>
        <video-selection></video-selection>
        <video-player></video-player>
      </div>
    </paper-drawer-panel>
  </template>

GOOD - without paper-drawer-panel:

No paper-drawer-panel...viewport bottom is shown

  <template is="dom-bind" id="app">
      <div main>
        <div id="header-v-center">
          <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
          </paper-icon-button>
          <div id="header-text-middle">SPICES OF THE WORLD</div>
          <div id="header-text-right">A SPECIAL EDITION! </div>
        </div>
        <div id="video-player-header" onclick="page('/home')" style="display: none">
          <div>
            <iron-icon icon="icons:arrow-back"></iron-icon>
          </div>
        </div>
        <video-selection></video-selection>
        <video-player></video-player>
      </div>
  </template>

Upvotes: 0

Views: 109

Answers (1)

ktiedt
ktiedt

Reputation: 436

Without seeing the live page, most likely you have a height: 100%; for your content region when it should be height: calc(100% - Xpx); where X is the height of your header.

Upvotes: 2

Related Questions