Geek Answers Handbook

Resize screen for sidenav in angular material design.

Is there a directive in angular stuff for resizing sidenav?

There is a sidenav file that displays a list of clients, and the right pane contains information about the client. I am trying to add a resize panel between them.

I used the following

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

which I found in the following

Angular JS directive resizable div

I tried the above plunker example, but sidenav never changed. The right panel moves to the right, but the left panel remains 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>

thanks

+5
source share
3 answers

A snippet has been found that can help add size when required, and this works well with the construction of Angular materials.

Used version of Angularjs 1.3.15 and Angular version for material design Used 0.9.8 ..

Tested in IE10 + and Chrome.

Here is the Git hub link

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

And here is a 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.
+7
source

'width', 'max-width' and 'min-width' are all set to 304px for md-sidenav inside angular -material.css. You need to rewrite the maximum and minimum width values ​​in y. custom.css

material.css

+1
source

Reply @LeoLozes: It took me a while (and a coffee break) to figure out a solution. You basically have to wrap sidenav with another div, which can be changed in this way

 <div resizable r-directions="['left']" r-flex="false"> <md-sidenav layout="row" class="md-sidenav-right md-whiteframe-2dp" ...> </md-sidenav> </div>
0
source

More articles:


All Articles