Turronff Köşeli UI ng-ızgara içinde kaydırma?

Question

Biz Açısal UI ng-ızgara kullanmak istiyorum, ama auto taşması ayarlanmamış ve kaydırma için ızgara içinde görünüm anlatmak için bir seçenek bulmak için görünmüyor olabilir. Yapmamız istiyoruz ne

tablo/ızgara yüksekliği bizim ızgara satır sayısı büyüklüğü kapalı tabanlı dinamik olmak zorunda olduğunu. Sabit bir maksimum satır sayısına sahibiz, bu nedenle DOM'da çok fazla satır bulunmasıyla ilgili çok az endişe var.

nereye herhangi bir öneriniz?

Answer 1

kullanılan Verileriniz sonra ng-grid başlatmak için. satırları içeren div ait height ağır basan deneyebilirsiniz, böylece satırlar kabı taşma yok, senin BB'de

<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

evet böyle tesis sunan bir eklenti var onun ng-grid-flexible-height.js

için plunker görebilirsiniz nasıl onun Geçenlerde aynı sorunlarla karşılaştıysanız ve https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY

istiyorsun bir çözüm buldu

Answer 3

:

şu çözüm açısal-ui kullanarak gerektirir

Ayrıca, satır arka plan rengiyle kaydırma çubuğu için ng-ızgara yapraklarını da doldurabilirsiniz (ne yazık ki, veri son aralığı, boşluğu doldurmak için genişlemeyecek olsa da):

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

siz de diğer bazı stilleri değiştirmeniz gereken tablo düzenine olabilir bağlı ama bunlar ana olanlardır. Ayrıca, tüm ngGrid için bir yükseklik ayarlamamaya dikkat edin. senin sorunu çözecektir CSS'nizde bu ekleme

Answer 4

:

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