UI-Grid在页面加载时不会占用100%的宽度

Question

我正在使用ui-grid在表格中显示数据.当我加载页面并离开几秒钟然后单击选项卡(包含ui-grid)时,ui-grid css break.它没有显示100%容器的ui-grid宽度.但是当我加载页面并且只需单击tab(包含ui-grid)时.ui-grid显示完美,我的意思是宽度是容器的100%.我不知道是什么问题.这是代码,我正在努力:

JS:

$scope.gridOptions= {
            enableFiltering: true,
            enableGridMenu : true,
            enableRowSelection: true,
            enableSelectAll: true,

            selectionRowHeaderWidth: 50,
            // rowHeight: 35,
            // infiniteScrollRowsFromEnd: 50,
            // infiniteScrollUp: true,
            infiniteScrollDown: true,
            columnDefs : [
              { displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'},
              { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}},
              { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} }
            ]
}

HTML:

<div class="grid m-b-20" ui-grid="gridOptions" ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll>
</div>

注意: ui-grid位于Angular bootstrap Tab中

这是崩溃网格的快照:

Answer 1

您是否在页面加载时使用动画 - 可能是制表符还是模态？如果是这样,那么通常的解决方法就是我们在模态教程中使用的解决方法:http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

问题是网格没有响应,它在渲染时得到它的大小.如果你没有给出一个固定的大小,它会从容器大小中得到它.如果您的容器当时正在设置动画,则尺寸可能不是实际尺寸.