enabled auto-height feature

[iowrwr]

We had the requirement to support gridster-items with auto height. So we rather quickly patched angular-gridster with defineProperty getters and setters. As this worked pretty well, we thought it might be interesting for the community as well, to have this feature in the master branch of angular gridster. So we reworked the patch using explicit setters and getters and patched all accesses to sizeY and just for consistency reasons as well for sizeX.

With this patch sizeY could be set to "auto" which resets any css height declaration and the method getSizeY() calculates the height from the element offsetHeight, for matching into the grid. Resizing is still possible and resets the height auto to a fixed height. This can again be reseted to auto if required.

I rather had difficulties to get e2e and unit tests running. Unit tests failed, as the items used in the unit tests, where manual copies and not instantiated from gridster-item, hence had no getSizeY() method. I fixed the test accordingly. e2e tests failed because of the usage of "findElement". I replaced the occurrences with element(). Also the expected sizes did not match perfectly. I assume, this might be related to PhantomJS, as it even failed in the original head.

I also adjusted the demo page to allow sizeY to be auto ('a') and to insert an amount of content (lines) to show height auto effects.

Please review and let us know, whether something needs to be changed in any way. We would like to see this patch being incorporated into the head.

[jameswyse]

Oh this is exactly what I was looking for, thank you!

Is there any way to make it work for initial values of auto as well? At the moment it only works if I set a numeric value for sizeY and then change it to auto after it has rendered.

[iowrwr]

Could you check the latest commit? I assume you used the standardItems approach with the gridster-item="item" notation. We were only using explicit parameters like

<li gridster-item
        row="view.y"
        col="view.x"
        size-x="view.width"
        size-y="view.height"
        ng-repeat="view in getViews()">

I found the reason, why the standardItems approach did fail and patched it. Hope this is fixing it for you.

[jameswyse]

Amazing, thank you! ❤️

👍 to this being merged

[jameswyse]

Do you use the floating option at all?

I'm trying to track down a problem where the row value of every block is reset to zero when the page is loaded (so every item is on the first row and overlapping)

[iowrwr]

No, we don't use floating. But it sounds like correct behaviour if you enable floating and the elements get floated. Did you cross check with the unpatched version? And in case the patch is doing wrong, could you provide a test case?

[nikhil-venkat]

@danomatic Do you plan on merging this into master ? Thanks @iowrwr for this feature !

[danomatic]

This is nice! I'm curious, could the getters be avoided by adding a watch when the sizeY is set to auto? I'm not sure which would perform better.

[durga-telsiz]

This is amazing. Thanks for sharing @iowrwr

[nikhil-venkat]

@iowrwr what is the lines property used for ?

[iowrwr]

@nikhil-venkat Its for inserting "lines of text" into a demo box, to show the auto-height effect. E.g. switching to auto and then adding or removing lines to see the box height adjusting and other boxes surrounding reacting to it.

[iowrwr]

@danomatic Excellent idea. Just to make sure I got your idea right. You're proposing to set a watcher on boxes offsetHeight and adjust sizeY accordingly. It would have simplified the approach I guess. ;) Although I'm not 100% sure I can rely on offsetHeight watchers to be processed before gridster watchers and forcing another digest cycle after offsetHeight changes might ruin performance benefits from the watcher approach.

[nikhil-venkat]

@iowrwr Thanks for the explanation . From what i understand we dont need to use it while using this feature?. Also for some reason i see extra margin that gets added under each widget , almost as if the margins that were declared in the dashboard config (margins: [15, 15]) are getting overridden.

[iowrwr]

@nikhil-venkat Exactly. Lines is not an angular-gridster property. Its just an angular-gridster-demo-page property.
Regarding margins. I assume, you are experiencing some additional space between an auto height box and another. The reason for this is most probably explained by the fact, that in order to calculate the needed space of a box in the grid layout, the auto-height feature calculates the height of the box + margins and rounds it up to the next multiple of a row height. Means the box is occupying a certain amount of rows in the grid, even if its height doesn't fully require the bottom row of this space. The rest of this row height (offsetHeight modulo rowHeight) will be experienced like an additional margin. As an experiment: switch the row height to 1px and you should see a perfect aligned margins.

[nikhil-venkat]

@iowrwr Setting the rowHeight to 1px dint seem to work . Is there a different work around ?

[iowrwr]

@nikhil-venkat Can you provide an example on gists or plunker, etc, which show the effect you are talking about?

[nikhil-venkat]

@iowrwr i was able to get it to work by giving a row height as '/5' or '/2' where its a fraction of the colwidth . This info was in the latest code download, not mentioned in the readme. The performance is slow when you move widgets. But its inconsistent, this maybe because of the watch that gets fired constantly and calls the getSizeY function . Maybe the getSizeY should return a cached copy of sizeY when called directly but the set should do the calculation .

[Pouja]

Any updates on this?

[morious]

@danomatic, Any chance to see this merged in the near future?

[im1dermike]

@iowrwr Perhaps I'm an idiot, but I can't get this to work. I'm using this js file: https://raw.githubusercontent.com/iowrwr/angular-gridster/42e922be5b6a7e1be4dc22b930deda1240b346d4/dist/angular-gridster.min.js. I'm also not able to use 'a' or 'auto' as a sizeY value in the demo like you said you updated. Little help please?

[iowrwr]

@im1dermike: You cannot use the static dist file in the repository as I did not generate that for the patch. But you can build it on your own. Just checkout the repository and use the grunt command, which will take the patched version and build the dist file from it. You have to install requirements first:

$ npm install

Then run:

$ grunt

The final file will be in the dist folder then.

[im1dermike]

@iowrwr: Thanks! I had seen some references to getSizeY in the dist file so I had assumed they had been generated. I'm able to get it to work now after generating the files.

Quick question regarding functionality of your auto-height version... the gridster items now have their height set based on content. I'm not sure if my expectations were off, but I was expecting items with to stack/float up under items whose height was auto-sized. Instead, they seem to occupy the same location (x, y) which they would regardless of the height of items above, resulting in undesired gaps between items when some content little content. Is there any to handle this?

[iowrwr]

@im1dermike: We don't use floating/stacking in our scenario, so I have hard times imagining a useful stacking scenario with auto height containers. Can you provide a gists or plunker page, showing the undesired effect and explain what you would have expected on the example?

[im1dermike]

@iowrwr: Sure. Here you go. You'll need to widen the preview panel a bit. As you can see, the item below "Little Content" does not snug up under it. I thought I could maybe get them to stack/float by setting the rows to either all 0 or set them sequentially (1, 2, 3...), but neither worked.

[iowrwr]

@im1dermike: I assume, the effect you are talking about is related to the rowHeight configuration. The auto height boxes are consuming a calculated number of rows in the grid and the next box can only sit on the next row. In order to never overlap, an auto height box consumes ceil(boxheight / rowHeight) rows. This never will be perfectly pixel aligned and extending the box to its rows height isn't an option, as it interferes with height calculation. You can minimize the effect by lowering the rowHeight setting. I suggest to play around with it, until it fits your needs.