Turnoff Scrolling trong Angular UI ng-grid?

Question

Chúng tôi muốn sử dụng lưới giao diện người dùng ng góc, nhưng dường như không thể tìm thấy một tùy chọn để nói cho khung nhìn trong lưới không được đặt tràn để tự động và không cuộn.

Điều chúng tôi muốn làm là chiều cao bảng/lưới là động dựa trên kích thước của số hàng trong lưới của chúng tôi. Chúng tôi có số lượng hàng cố định tối đa, do đó, có rất ít mối quan tâm với việc có quá nhiều hàng trong DOM.

Bất kỳ đề xuất nào về nơi cần đi?

Answer 1

Gần đây tôi đã chạy vào vấn đề tương tự và tìm thấy một giải pháp tại https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY

Bạn muốn ng-grid để khởi tạo sau khi bạn có dữ liệu.

Các giải pháp sau đây đòi hỏi phải sử dụng góc-ui:

<div ui-if="dataForGrid.length>0" ng-grid="gridOptions" ng-style="getTableStyle()" /> 

$scope.getTableStyle= function() { 
    var rowHeight=30; 
    var headerHeight=45; 
    return { 
     height: ($scope.dataForGrid.length * rowHeight + headerHeight) + "px" 
    }; 
}; 

Answer 2

vâng đó là một plugin trong đó cung cấp cơ sở như vậy nó ng-grid-flexible-height.js

bạn sẽ nhìn thấy plunker cho cách nó sử dụng

Answer 3

Trong CSS của bạn, bạn có thể thử cách ghi đè các height của div chứa hàng, vì vậy các hàng không tràn container:

.ngViewport { 
    height: auto !important; 
} 

Bạn cũng có thể điền vào khoảng trắng mà lưới ng để lại cho thanh cuộn với màu nền của hàng (mặc dù không may dữ liệu cuối cùng sẽ không mở rộng để lấp đầy khoảng trống):

.ngCanvas { 
    width: 100% !important; 
} 
.ngRow { 
    width: 100% !important; 
} 

Tùy thuộc vào bố cục bảng, bạn có thể cần phải thay đổi một số kiểu khác, nhưng đây là những kiểu chính. Cũng cẩn thận không đặt chiều cao cho toàn bộ ngGrid.

Answer 4

Thêm này để CSS của bạn sẽ khắc phục vấn đề của bạn:

.ngViewport{ 
    height:auto !important; 
} 
.ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel { 
    width: 100% !important; 
} 
.ngRow { 
    border-bottom:none !important; 
}