search

Reklino / angular-resizable

A lightweight directive for creating resizable containers.
http://codepen.io/Reklino/pen/raRaXq/
MIT License
316 stars 115 forks source link

flexbox + ui grid + angular-resizable? #39

Open cmichaelgraham opened 8 years ago

cmichaelgraham commented 8 years ago

@Reklino - could flexbox + angular-resizable + ui grid produce a resizing ui grid that can shrink?

Reklino commented 8 years ago

@cmichaelgraham I believe so... But from my experience with UI-Grid, you may have to trigger the resize manually. I'd experiment with using the resizing event in angular-resizable to trigger the resize. If you get it working, throw up a codepen here :D

cmichaelgraham commented 8 years ago

ok. so here's the starting point without using angular-resizable:

the running sample shows the ui grid in a flexbox. it starts out with scrollbars. if you grow the window, it resizes fine. if you then shrink the window, the grid maintains its largest size and scrollbars appear.

here's the repo: https://github.com/cmichaelgraham/ng-ui-grid-flexbox

ui-grid directive is here app module def is here

i'll work on updating the sample to use angular-resizable next :smile:

cmichaelgraham commented 8 years ago

ok, got the above working without angular-resizable - will circle back to implement a resizing version at some point...

i wrapped the ui grid div in a div that uses flex to grow and made it position relative, then I positioned the ui grid to be absolution with top, left, bottom, and right to 0px (well, right and bottom are 2px, to be honest :wink:)

Repo: https://github.com/cmichaelgraham/ng-ui-grid-flexbox Running sample: http://cmichaelgraham.github.io/ng-ui-grid-flexbox/index.html

waltzonice commented 8 years ago

@cmichaelgraham - Did you ever get it working with the angular-resizable? This is exactly what I want to do...