Widget moves out of grid and hides behind browser window

[smkart]

We are facing issue with grid item when using sidebar which toggle in/out of application

Say for example, When grid is body of the application and application contains side bar which can be removed and displayed in the application with toggle button,( Step 1) Below is the sidebar in open state

Grid items can be resized inside the grid, Below grid item position on grid when sidebar is in open state

(Step 2)When the sidebar gets closed all the grid item moved bit to the left on grid ( This is expected behavior no issue in this case). (Step 3)Now with sidebar closed resize the grid item width (Expand the widget width towards right browser window). (step 4) Toggle sidebar back to open state . This made widget to get hide behind the browser window causing widget to move out of grid Below is the error case where widget hides behind the browser window

Expected behavior: Widget should get hit with browser window and move inwards

Below is my configuration:

     '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

Please help us to solve this issue ASAP

Thanks Mani

[BTMorton]

OK, I added a triggerResize method to the NgGrid object which calls the same functionality that . If you add a @ViewChild reference to your parent component, you can then call this method when the sidebar slides in/out.

[smkart]

No, Unfortunately this makes no effect , I have emitted event on sidebar toggle and whenever the toggle happen it calls ttriggerResize() and even the function gets executed but it didn't make any effect on UI

But once I manually resize the browser window everything fits into the grid again .

Thanks Mani

[smkart]

Hi ,

Any update on this issue ? We are finding difficultly because of this

Thanks Mani

[BTMorton]

The triggerResize method calls exactly the same method that is called when the window resizes (https://github.com/BTMorton/angular2-grid/blob/master/src/directives/NgGrid.ts#L366), so I don't know why it's not working for you.

Does the sidebar have a slide in animation? If so I'm guessing that you're calling the triggerResize method before the actual grid container element has changed size, meaning that it's recalculations won't work.

Can you create a plunker to reproduce the issue so that I can investigate more?

[rmiller-sgntr]

I had a similar problem and it worked for me:

@ViewChild(NgGrid) myGrid: NgGrid;
...
this.formGrid.triggerResize();

Thanks!

[SairamPotta]

I had a similar problem and it worked for me:

@ViewChild(NgGrid) myGrid: NgGrid;
...
this.formGrid.triggerResize();

Thanks!

I am also facing the same issue can you please provide an example. Here you used myGrid as ViewChild and applied styles for formGrid as triggerResize.