Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causing this issue, and it seems to be inheriting the width of its container. Can anyone familiar with Angular Material help me understand why? (Resize the window to see the button in action)
Here's the link to my CodePen:
http://codepen.io/anon/pen/jPYNzy
Below is the code snippet:
<!-- Container -->
<div layout="column" layout-fill>
<div layout="row" flex>
<!-- Content -->
<md-content flex>
<md-toolbar>
<div class="md-toolbar-tools">
<h1>Title</h1>
</div>
</md-toolbar>
<div layout="column" class="md-padding">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<md-button ng-click="toggleLeft()" hide-gt-md>
Toggle left
</md-button>
</div>
</md-content><!-- ./Content -->
</div>
</div><!-- ./Container -->