Deviazione Scorrimento all'interno dell'interfaccia utente ng-griglia?

Question

Vorremmo utilizzare la griglia di interfaccia utente angolare, ma non riesco a trovare un'opzione per dire al viewport all'interno della griglia di non impostare l'overflow su automatico e non scorrere.

Quello che ci piacerebbe fare è che l'altezza della tabella/griglia sia dinamica in base alla dimensione del numero di righe nella nostra griglia. Abbiamo un numero massimo di righe fisso, quindi c'è poco motivo per avere troppe righe nel DOM.

Qualche suggerimento su dove andare?

Answer 1

recente ho incontrato stessi problemi e trovato una soluzione al https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY

Volete ng-grid da inizializzare dopo aver ricevuto i dati.

la seguente soluzione richiede l'utilizzo angolare-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

Sì, c'è un plugin che offre tale impianto la sua ng-grid-flexible-height.js

si può vedere la plunker per come la sua utilizzati

Answer 3

nel CSS, si può provare l'override del height del div contenente le righe, quindi le righe non traboccare il contenitore:

È inoltre possibile compilare lo spazio bianco che ng-griglia lascia per la barra di scorrimento con il colore di sfondo della riga (anche se sfortunatamente i dati dell'ultima cella non si espandono per colmare il divario):

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

A seconda del layout della tabella, potrebbe essere necessario modificare anche altri stili, ma questi sono i principali. Inoltre, fare attenzione a non impostare un'altezza per l'intero ngGrid.

Answer 4

L'aggiunta di questo alla tua CSS risolverà il vostro problema:

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