Material: ng-include messes up md-sidenav

[justechn]

I am working with the Angular Material Starter App and I have run into a problem. I am trying to break it up into multiple files so it is more like a production app. However, when I move the sidebar out into a separate file and then pull it back in with an ng-include it gets messed up.

I take this code out of the index.html

<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
            md-component-id="left"
            md-is-locked-open="$mdMedia('gt-sm')">

    <md-toolbar class="md-whiteframe-z1">
        <h1>Users</h1>
    </md-toolbar>

    <md-list>
        <md-list-item ng-repeat="it in ul.users">
            <md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
                <md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
                {{it.name}}
            </md-button>
        </md-list-item>
    </md-list>

</md-sidenav>

and save it to a file called sidebar.html. Then I put this code in place of the above code

 <ng-include src="'sidebar.html'"></ng-include>

The bottom of the sidebar no longer goes all the way down

[devversion]

I think this is because of the ng-include directive, you should apply the flex attribute to that, then the directive will fill the layout column

[justechn]

I changed the ng-include to look like this

<ng-include src="'sidebar.html'" flex></ng-include>

and now the app looks like this

[iRoachie]

Okay I figured it out.The ng-include doesn't have a layout attribute. So the "child" of the ng-include (side-nav) will calculate it's height based on the list of users.

Add a layout attribute to the ng-include, then add flex to the side-nav, so it fills the ng-include.

<ng-include src="'src/side-nav.html'" layout="column"></ng-include>

<md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
              md-component-id="left" flex
              md-is-locked-open="$mdMedia('gt-sm')">

[justechn]

@iRoachie thanks, that worked.