Angular-gridster2: Gridster Item option to dynamically calculate and apply height/width of the item

[MaiGhoneem]

Hello,
is there option in gridster item to dynamically calculate and apply height/width of the item that the content will not have to be scrolled?

[inorganik]

Check out the css styles I suggested in #379

[CollinGraf314]

You can get all the height/width information you need in the GridsterItemComponentInterface which is returned during each itemResizeCallback. Check this out:

constructor() {
        this.options = {
            itemResizeCallback: this.itemResize.bind(this),
            gridType: 'scrollVertical'
        };
    }

    public itemResize(item: GridsterItem, itemComponent: GridsterItemComponentInterface): void {
        console.log(itemComponent); // take a closer look at the gridster property;
    }

[MaiGhoneem]

hello,
thank you for reply, i need to gridster item height fit content, not content fit gridster item.

[CollinGraf314]

That functionality is nearly impossible to get with this repository. Think of the following case:

Given: gridsterItems must fill exactly one or more grid cells, all columns must be the same width, and all rows must be the same height.
You have two gridsterItems, one has content of size of 200px by 200px and one has content size of 181px by 181px.
It is now impossible for these two gridsterItems to be adjacent to each other unless each row and column had a height/width of 1px (as 181 is a prime number and has no common denominators with 200).

For now obvious reasons this functionality is not included in the repository, however, given a few conditions you can still add this functionality yourself. If you know for a fact that all of your content for each gridsterItem is going to have the same dimensions, then if you can find a way to calculate the height/width of that content, you can then set the fixedRowHeight or fixedColumnWidth properties on the gridster configuration object and run this.options.api.optionsChanged(); where this.options is your gridster configuration object. You could even go one further and calculate the total height/width of your grid, and then set minRows/maxRows minCols/maxCols to be the grid-height/row-height and grid-width/col-width rounded down. You also have the option to simply limit yourself to a single item on your grid, or to make the grid's row height and column width to each be 1px, but defeats most of the purpose of using angular-gridster 2 in the first place.