javascript - resize bar for sidenav in angular material design.

Question

Is there a directive in angular material to resize sidenav?

There is a sidenav which shows list of clients and the right pane has the details of the client. I am trying to add a resize bar between them.

I used the following

http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview

which i found in the following

Angular JS resizable div directive

I tried following the above plunker example but the sidenav never resized. The right pane moves right but the left pane remain unchanged.

<div layout="row" flex>

        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" id="sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            <md-list class="sideBar">
                <md-item ng-repeat="client in data">
                    <md-item-content>
                        <md-button ng-click="selectClient(client);" >

                                {{client.name}} 
                        </md-button>
                    </md-item-content>
                </md-item>
            </md-list>
        </md-sidenav>

        <div id="sidebar-resizer" 
        resizer="vertical" 
        resizer-width="6" 
        resizer-left="#sidenav" 
        resizer-right="#primary-col"
        resizer-max="400">
    </div>
    <!-- viewport column -->

    <div layout="column" flex class="content-wrapper" id="primary-col">
        <div id="viewPort" ng-view></div>
    </div>
 </div> 

Thank you

Answer 1

Found a snippet that can help add resize where ever required and this works well with the Angular Material Design.

Angularjs version used 1.3.15 and Angular material design version Used is 0.9.8..

Tested in IE10+ and chrome.

Here is the Git hub link

https://github.com/Reklino/angular-resizable

And here is the working codepen example

http://codepen.io/Reklino/pen/raRaXq

PS-I had issues with the r-flex so I set it to false.It worked fine.