Multiple ui-grids within multiple tabs or divs, which are hidden, not displaying properly

[ackimwilliams]

Multiple UI-grids not displaying properly when inside of a tabs or a divs which are hidden.

How to recreate issue:

1. 3 tabs: A, B, and C
2. place 1 grid (with unique data and ids) in B and C each
3. let the page load with grid A showing
4. When I click tab B, B's grid appears fine, however, clicking tab C, C's grid does not display
5. Each individual tab's grid displays when I resize the page however.
6. Navigating to another tabs, its grid is not displayed until you resize this page

Related to:
#50
#581
#991

[tomforster]

Having same issue (I believe)

minimal test case:

http://plnkr.co/edit/9Xj9au3RoNMjvl70TWA8?p=preview

just click the button to swap to the 2nd grid (which should be displayed incorrectly), and then resize the screen to see it render correctly.

This is in chrome 48.0.2564.109

[KegDemon]

Consider adding: 'ui.grid.autoResize' to your dependancies at run, then add 'ui-grid-auto-resize' to each grid to over come the issue. Alternatively, you can used 'ng-if' instead of 'ng-show' to achieve a similar result.

[bhantol]

Worked fine with ui.grid.autoResize and ui-grid-auto-resize.
http://plnkr.co/edit/iUdfjPtHZWkh72MtSDuO?p=preview
However my issue is with scrolling. I will try to produce another plunker

[yogeshgadge]

I solved this by getting rid of bootstrap tabs and used purely css: visibility: hidden option and position: absolute. I had the exact same requirement as @ackimwilliams.

Why following solutions did not work for me
ng-show, angular-ui tabs, display:none solution

ng-show or other variants that use display:none was problematic and also another probem that crops up in Internet Explorer 11 in where if you scroll in one grid and toggle the grid you see blank rows on top.

ng-if
ng-if was expensive because it rebuild the doms and created issues with touch events and besides you loose lost the grid state withng-if`. It caused sluggisn response as you clicked on the tabs.

Finally visibility: hidden solution
In this plunkr solution for simplicity I am not showing the tabs but a simple toggle button but you get the idea.

[Sampath-Lokuge]

This works for me 👍

app.js

var appModule = angular.module("app", [
    'ui.grid.autoResize'
]);

Html

<div class="grid" ui-grid="vm.refereeDetailGridOptions" ui-grid-auto-resize></div>

css

.grid {
    width: 980px !important;
}

[nishantpandya]

Hi @Sampath-Lokuge

I have used your code & it's working absolutely correct. But I have found a issue, in my multiple grid (using tab in a single page) horizontal scroll comes & by using your code, scroll is invisible when I do switching from one tab to another & if we do any thing in page like click on sorting or pagination or page reload then scroll visible. Please help me.

Thank,
Nishant