Components: MdSidenav should not have min-width

[shlomiassaf]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Developer should be able to set the width of MdSidenav element

What is the current behavior?

A Developer can set the width in several ways.
Using CSS:

md-sidenav {
  width: 200px;
}

Using binding:

<md-sidenav [style.width]="...">

or ngStyle

The above will work as long as the width is greater then 5% of the container (MdSidenavLayout)
There is a CSS rule md-sidenav {min-width: 5%}
https://github.com/angular/material2/blob/master/src/components/sidenav/sidenav.scss#L116

Since MdSidenav is shadowed via emulation it's hard to change that behaviour, the only option is to set min-width: unset inline, which requires a bind or using the renderer.

What is the use-case or motivation for changing an existing behavior?

An app can have a small md-sidenav for icons, very common use case.
min-width should be a decision made by the developer.

Which versions of Angular, Material, OS, browsers are affected?

all

Is there anything else we should know?

In general, the "themed" approach for material design in angular 1 worked great but it raises some problems in angular 2.
In ng1 a developer had a theme which helped keeping look and feel consistent. In some special cases it might be needed to have a custom color not in the theme palette, having a special CSS selector for that solved the issue.
In Angular 2 however, it's get tricky since shadow dom get's applied. For example, having a custom background color for md-sidenav is not straight forward since background color is fixed to the theme's bg color and it's shadowed. The solution is to inline styles or have a container inside the sidenav with 100% h/w and the color needed.

[jelbourn]

I agree that, at the very least, the current min-width is too large. We should probably either remove it or set it to something like 10px; it's only there so tht if people add a sidenav without content they don't think it's simply not rendering.

[shlomiassaf]

@jelbourn Thanks.

If someone is placing a sidenav without content he should expect an empty sidenav.

Isn't it similar if someone creates <h1></h1> and see's nothing?

If one wants width in an empty sidenav it should be explicitly set.

[msegers]

It depends on the use case but as @shlomiassaf mentions, it makes sense to have it not appearing visually. Since also no margins are provided by default, I believe the same philosophy of "Define it yourself" applies here?

[vtolstov]

Does this already on latest release of material2 from npmjs ?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}