Grid item doesn't get aligned back to normal position on resize #297
Description
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