Automatically change height of gridster div

Hello,

In gridster.js (implemented as a jQuery plugin) the height of the gridster div is changed automatically. In angular-gridster2, this is not done which causes the widgets to compress vertically. With gridType: 'fit', the widget height remains constant, but so does the gridster div. Isn’t it better to change the height of the gridster div automatically so that widgets aren’t compressed vertically?

Thanks

Issue Analytics

State:
Created 6 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

1reaction

tiberiuzuldcommented, Jun 28, 2017

Hi @samarsiraj , The grid will take all the space given to it. Yes in that way is the reverse way of how gridster.js is doing it.

The gridType: 'fit' will fit in the all available space.

If you want not to compress vertically choose gridType: 'scrollVertical'.

How the angular-gridster2 is working internally now cannot be changed to behave like gridster.js. The width of a column and the height of a row is determined by the width and height of the gridster div and the total number of rows and columns. You can see the code here at line 158

0reactions

nancyhan2017commented, Oct 27, 2018

I have a similar issue. If I highlight a label on any gridsterItem, then resize an item, it moves around. I cannot stop it.

Top Results From Across the Web

Increasing div width and height dynamically

I want to increase/decrease the div width and height dynamically as the widget is resized.Also I want the aspect ration of the image...

xenialab/angular-gridster

Start using @xenialab/angular-gridster in your project by running `npm ... a jQuery plugin needed to check for changes in the gridster size.

gridster.js - GitHub Pages

Change the size of a widget. Width is limited to the current grid width. Parameters. $widget HTMLElement: The jQuery wrapped HTMLElement that represents...

Angular Data Grid: Grid Size

When auto height is off then your application should set height on the grid div, as the grid will fill the div you...

Gridster In Angular (forked)

<div style="width: 90vw; height: 80vh;">. <div class="row">. <div class="col-md-6">. <select> ... <gridster-item [item]="{ x: 0, y: 0,. rows: 1, cols: 1 }">.