Material: md-dynamic-height adds scroll bar to entire page

Created on 21 Nov 2015  路  5Comments  路  Source: angular/material

When md-dynamic-height is true and there is content overflow scroll bars are added to the entire page. Without the md-dynamic-height attribute the tab height is fixed but the scroll bars are properly added to only the tab.

Most helpful comment

I agree with @rgrasso. If this was an intentional change it seems like the wrong one from a UX perspective. Especially on a mobile device, the predominant use of tabs is to be sub-pages filling the viewport. The overflow of a given tab is welcome to scroll, but the tab bar itself should remain visible.

I think this behavior is partly responsible for the difficulty in positioning a FAB relative to a tab as I mention in #6510

I can understand the desire to fully expand the tab content on a desktop, it doesn't make as much sense on mobile devices. There should probably be an option to expand the md-tabs container to fill the viewport, and scroll the overflow of a given tab if necessary. This sees like it might make sense on a larger display as well. Just let md-tabs always fill its parent 100%

All 5 comments

I tried to reproduce that issue -> http://codepen.io/DevVersion/pen/PPgeYE (can you verify this codepen? is it representing your issue?)

Yes it is representing issue- if you take your codepen and change line 3 of your html from:

<md-tabs md-dynamic-height="" md-border-bottom="">

to

<md-tabs md-border-bottom="">

you will see that the behavior of the scroll bar changes

Yes, thanks for your response :+1:
That Scroll Bar Changes are the intentional behavior.

As it's logical if the height changes dynamically the content will show all time so the body provides the scroll bars. But if the height of the tabs is fixed the tab content provides the scroll bar.

Thanks for looking into this but I have to disagree with the design.

The behavior of the scroll bars should be consistent regardless of whether the tab content viewport size is fixed, dynamic, or set programmatically. The end user is not aware of the decision the developer had made in this regard and would expect the UX to be the same in all three cases.

It does not follow that when the developer has made the decision to allow the size of the content area to be dynamic then scroll bars attach to the entire page and everything on the page scrolls: banner, toolbar, tab bar, nav bar, etc but if the developer decides that the content area of the tab should be fixed then scroll bars attach to only the viewport of that tab when the content overflows and only the content of the tab being displayed scrolls.

I suggest that the latter behavior is the correct behavior and the best UX for the end user. Scroll bars should always attach to the viewport of the tab content area when content overflows and should be independent of how the size of the viewport was set. Please see Daniel Nagy's md-table-master project: https://github.com/daniel-nagy/md-data-table for an example of this behavior outside the context of tabs.

I agree with @rgrasso. If this was an intentional change it seems like the wrong one from a UX perspective. Especially on a mobile device, the predominant use of tabs is to be sub-pages filling the viewport. The overflow of a given tab is welcome to scroll, but the tab bar itself should remain visible.

I think this behavior is partly responsible for the difficulty in positioning a FAB relative to a tab as I mention in #6510

I can understand the desire to fully expand the tab content on a desktop, it doesn't make as much sense on mobile devices. There should probably be an option to expand the md-tabs container to fill the viewport, and scroll the overflow of a given tab if necessary. This sees like it might make sense on a larger display as well. Just let md-tabs always fill its parent 100%

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rdantonio picture rdantonio  路  3Comments

WebTechnolog picture WebTechnolog  路  3Comments

pablorsk picture pablorsk  路  3Comments

PeerInfinity picture PeerInfinity  路  3Comments

chriseyhorn picture chriseyhorn  路  3Comments