uigrid角度滚动问题

Question

strange thing happening here. I'm using a uigrid (not my first) and it's only displaying data on half it's 'canvas'.

Display

When I scroll, it keeps the blank part of the grid and scrolls the data side.

Html:

            <div class="col-md-12" ng-controller="ctrl.Import">
<h4>Please drop a file into the 'Files' tab, then use the 'Data' tab to validate and upload.</h4>
<uib-tabset>
    <uib-tab heading="Files">
        ...select files here
    </uib-tab>
    <uib-tab heading="Data">
        <div class="tab-content">
            <h4 class="page-header mt0">Import file</h4>
            <div ui-grid="gridData"
                 ui-grid-resize-columns
                 ui-grid-selection>
            </div>
        </div>

Script:

    $scope.gridData = {
        enableRowSelection: true,
        enableRowHeaderSelection: true,
        enableSorting: true,
        enableColumnMenus: false,
        multiSelect: false,
        modifierKeysToMultiSelect: false,
//      enableColumnResizing: true,
        noUnselect: true
    };

Thanks for your help!

Answer 1

We had similar problem and workaround is to calculate and define grid height based on the number of items being rendered inside the grid.

or add the below style="{height:auto}"

<div ui-grid="gridData"
     ui-grid-resize-columns
     ui-grid-selection
     style="{height:auto}">
</div>