Grid item doesn't get aligned back to normal position on resize

[smkart]

Hi,

Once again enjoying the library thanks for your work

Version found : v2.3.1

When the window get resized grid items are not getting aligned vertically instead I am getting horizontal scroll bar to view the grid item , also the grid item goes outside the grid when I scroll horizontally to view the hidden grid item

Example
1. Actually position on grid

2. On window resize

• Expected that gird item should come down below the first item when browser window overlaps grid item
• Actual it overlaps and brings horizontal scroll bar

3. Grid items goes out of grid

• When I scroll the grid , it is clearly seen that grid item goes out of the grid

One last step should be when window gets resized back then the grid item should go back to the normal position. ( This should be considered while fixing above case )

Explaining the above as positions:

Row 1 contains 2 item representing as [row][col]

Actual position of 2 grid items:
[0][0] [0][1]

On window resize over 2nd grid item:
[0][0]
[1][0]

On window resize back to original position:
[0][0] [0[1]

Additional information

This works perfectly fine with v2.0.2 and broken in v.2.0.3

Code walk-through

In version 2.0.2 it works fine with below code flow:

Whenever the window get resized directive call goes to the event handler function

• Inside the above function item.recalculateSelf(); for each item in the grid
• recalculates works perfect calculating x and y co-ordinates of each grid item

Inside ngGridItem.js

• setPosition takes care of setting the co-ordinates of grid item based on cascade

With all information about the working code lets see the recent code with difference

Changes in recent version: ( v2.3.1 )

When the resize is triggered it goes to the same function

Inside it again goes to item.recalculateSelf();

But in the setPosition() code is changed to set the left, right, top ,botton of grid item which is not shown any effect on grid items ( I suspect this could an issue probably )

Once the angular render is completed it doesn't changed anything on grid items position in grid.

Hope above will help to narrow the issue

I have below grid config:

gridConfig: NgGridConfig = { 'margins': [2], 'draggable': false, 'resizable': false, 'max_cols': 0, 'max_rows': 0, 'visible_cols': 0, 'visible_rows': 0, 'min_cols': 1, 'min_rows': 1, 'col_width': 30, 'row_height': 20, 'cascade': 'up', 'min_width': 300, 'min_height': 200, 'fix_to_grid': false, 'auto_style': true, 'auto_resize': false, 'maintain_ratio': false, 'prefer_new': false, 'zoom_on_drag': false, 'limit_to_screen': true, 'center_to_screen': true };

Please help me solve the issue , I tried some fix over ngGrid.js but it causes few other issue

[smkart]

Hi All,

Please help us with any fix , We are facing hard time with this issue

Thanks

[AntonSelin]

The same bug is still there in version 3.0.0.

[smkart]

Hi,

Do we have fix for this in latest version ? This fix is so important for us , Please help us to get this fixed :(

[suraj740]

try adding 'auto_resize': true, it might solve your issue.