Making the contents of the drawer scrollable issue.

[halloweenman]

Description

When making the contents of the drawer scrollable and the div content wrapper contains paper-tabs then some overflowed content is hidden and is not visible even when scrolled to bottom. In the code below, it's not possible for END text to be visible on screen when scrolling. Seems to be an issue related to height, height of paper-tabs pushes out bottom of div conten.

<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]" align="end">

          <paper-tabs selected="{{ptselected}}">
            <paper-tab>OPTION</paper-tab>
          </paper-tabs>

          <div style="height: 100%; overflow: auto;">

            <p>START</p>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
            <p>10</p>
            <p>11</p>
            <p>12</p>
            <p>13</p>
            <p>14</p>
            <p>15</p>
            <p>16</p>
            <p>17</p>
            <p>18</p>
            <p>19</p>
            <p>20</p>
            <p>21</p>
            <p>22</p>
            <p>23</p>
            <p>24</p>
            <p>25</p>
            <p>END</p>
          </div>
        </app-drawer>

Expected outcome

Would expect to scroll start to end

Actual outcome

Unable to scroll to end as all content is not visible.

Browsers Affected

• [ x] Chrome
• [ x] Firefox
• [ x] Safari 9
• [ x] Safari 8
• [ x] Safari 7
• [ x] Edge
• [ x] IE 11
• [ x

] IE 10

[halloweenman]

If you move <div style="height: 100%; overflow: auto;"> so that it is before the paper-tabs tag then scroll behaviour on mobile devices does not function correctly. When scrolling down it keeps resetting back to the top.

[keanulee]

Your scroller div is 100% the height of its parent, but adding paper-tabs to that would certainly make the total contents of app-drawer over 100%. That is to say, the scroller div needs to be less than 100% height (assuming you don't want the tabs to scroll with the content). Consider using flexbox to size the scroller div:

<app-drawer>
  <div style="height: 100%; display: flex; flex-direction: column">
    <paper-tabs>...</paper-tabs>
    <div style="flex: 1; overflow: auto">
      scroll contents....
    </div>
  </div>
</app-drawer>

[halloweenman]

Thanks, much appreciated.