Open ackimwilliams opened 8 years ago
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
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.
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
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 with
ng-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.
This works for me :+1:
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;
}
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
Multiple UI-grids not displaying properly when inside of a tabs or a divs which are hidden.
How to recreate issue:
Related to: https://github.com/angular-ui/ui-grid/issues/50 https://github.com/angular-ui/ui-grid/issues/581 https://github.com/angular-ui/ui-grid/pull/991