Sidemenu width increases in large viewports when displaying icons with no text (collapsed view) #4215
Labels
area: material/sidenav
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Bug, feature request, or proposal:
Bug
What is the expected behavior?
The sidemenu width would keep the width of its content, and not increase as the viewport width increases from small to large. Also, sidemenu content would not get overlapped by the sidemenu as the viewport increases in size.
UPDATE
A similar issue occurs as you move from a large to small viewport, see #4215 (comment) that was posted below.
What is the current behavior?
Sidemenu when content is in a
md-nav-list
ofmd-icon
's starts to increase in width in larger viewports instead of maintaining the smaller viewport width associated to themd-icon
. Also, content slowly slides under the sidement as the viewport size is increasedExample 1: Increasing Viewport from Small to Large
Example 2: Content Position Corrected After Click
Clicking any icon after the content is overlapped by the sidemenu due to the viewport width increasing corrects the issue the content being overlapped, but increased width remains. Content moves back into the proper position using a transition, but only on click.
What are the steps to reproduce?
https://plnkr.co/edit/dcWC0RyemDofqMQ9fNJf?p=preview
What is the use-case or motivation for changing an existing behavior?
Common XU feature of having a expanded or collapsed sidemenu based on mobility or user preference is an easy way to get more viewport real-estate while interacting with an application.
Which versions of Angular, Material, OS, browsers are affected?
Angular 4.02
Angular Material: 2.0.0-beta.3
Windows 10
Chrome, FireFox, IE 11, Edge
The text was updated successfully, but these errors were encountered: