UI-Grid non occupa il 100% di larghezza sul caricamento della pagina

Question

Sto usando la griglia utente per mostrare i dati nella tabella. quando carico la pagina e lascio per qualche secondo e poi clicco sulla linguetta (che contiene la griglia ui), l'interruzione css della griglia ui. non mostra la larghezza di ui-grid al 100% di container.ma quando carico la pagina e clicco sulla scheda (che contiene ui-grid). ui-grid sta mostrando perfetto, intendo la larghezza di quello è il 100% del contenitore. Non so qual è il problema.Questo è il codice, Sto lavorando su:

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> 

Nota:ui-grid è all'interno del bootstrap angolare Scheda

.210

e qui è l'istantanea della griglia di crollo:

Answer 1

Si sta utilizzando un'animazione al caricamento della pagina - forse una linguetta o un modale? Se è così, la solita soluzione è quella che usiamo nel tutorial modale: http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

Il problema è che la griglia non è reattiva, ottiene la dimensione sul rendering. Se non hai dato una dimensione fissa, la ottiene dalle dimensioni del contenitore. Se il tuo contenitore è in animazione al momento, la dimensione potrebbe non essere la dimensione reale.

Answer 2

La soluzione per questo è l'aggiunta della larghezza e della riga Altezza per riga e cella. Come ho detto si tratta di una soluzione e sono sicuro che ci deve altri modi di fare questo, ma questa una soluzione rapida e dovrebbe ottenere quello che almeno andare :)

$scope.gridOptions={ 
    //set the row height to a fixed length 
    rowHeight: 80, 
       enableFiltering: true, 
       enableGridMenu : true, 
       enableRowSelection: true, 
       enableSelectAll: true, 
       selectionRowHeaderWidth: 50, 
       infiniteScrollDown: true, 
       columnDefs : [ 
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:100}, 
        { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}, width:100}, 
        { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} , width:100} 
       ]} 

Answer 3

Con l'approccio suggerito polling, la funzione è chiamato dopo un'attesa specificata, quindi ogni cambio di larghezza avviene all'improvviso. Ciò si traduce in un notevole errore quando l'utente modifica rapidamente le dimensioni della tabella.

Un approccio molto migliore è quello di associare un gestore di ridimensionamento per chiamare una funzione di ridimensionamento quando la finestra cambia

angular.element($window).bind('resize',() => { 
     this.updateTableWidth(); 
    }); 

Il mio progetto utilizza una barra laterale, quindi rappresentano la larghezza barra laterale o imbottitura larghezza (se la barra laterale è aperto o non), poi basta impostare una variabile legato ad uno stile ng sul mio tavolo involucro

private updateTableWidth() { 
    let width = this.$window.innerWidth; 
    let modifier = (width >= 1280) ? this.sidebarWidth : this.paddingWidth; 
    this.tableWidth = (width - modifier) + 'px'; 
} 

<div ng-style="{'width': ctrl.tableWidth}"> 
    <div ui-grid></div> <!-- Whatever your grid is --> 
</div> 

Answer 4

Questo è ciò che ha funzionato per me come un fascino!

Add dicono ng-style="windowResize" al ui griglia di markup nel modello HTML, e su $scope.windowResize, aggiungere width: 100% entro onRegisterApi funzione nell'ambito di applicazione.

Quindi, in pratica, onRegisterApi() è la funzione predefinita da ui-grid che si attiva quando viene effettivamente disegnata la griglia, quindi in pratica stiamo aggiungendo in modo condizionale la larghezza 100% alla griglia e rendendola reattiva per tutte le finestre.

Answer 5

utilizzare $ scope.gridApi.core.handleWindowResize(); questo metodo in intervallo di tempo per risolvere questo problema

onRegisterApi: function(gridApi) { 
     $scope.gridApi = gridApi; 
     $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows(); 
     //$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter); 
     gridApi.selection.on.rowSelectionChanged($scope, function(row) { 
      $scope.selectedUser = row.entity.dev_id; 
      console.log(row); 
      console.log(row.grid.selection.lastSelectedRow.isSelected); 
      /*$http.get('./api/ioni_developers/' + $scope.selectedUser).then(function(response) { 
       if(row.grid.selection.lastSelectedRow.isSelected === true){ 
        $scope.data.dev_id = response.data.dev_id; 
        $scope.data.dev_name = response.data.dev_name; 
        $scope.data.dev_email = response.data.dev_email; 
        $scope.selected = false;   
       }else{ 
        $scope.data.dev_id = ''; 
        $scope.data.dev_name = ''; 
        $scope.data.dev_email = ''; 
        $scope.selected = true; 
       } 
      })*/ 
     }); 
     $scope.selected = true; 
     $interval(function() { 
      $scope.gridApi.core.handleWindowResize(); 
      }, 500, 10); 
    } 

Answer 6

$timeout(function() { 
       $scope.gridApi.core.handleWindowResize(); 

      }, 500); 
      $scope.gridApi.core.refresh(); 

Questo ha fatto il lavoro per me.

Answer 7

Rimuovi Ui-grid-ridimensiona colonne da tag div HTML.