Firefox ui-grid columns bug

[rboughani]

I know not how, but when I view my ui-grid of chrome, everything works fine, but when I display it on firefox, I find just 4 column, by against, I must have 83 columns firefox screen :-1:

chrome screen :+1:

My confuguration is like :

 $scope.gridOptions = {
    enableSorting : true,
    enableRowSelection : true,
    selectionRowHeaderWidth : 50,
    enableSelectAll : true,
    enableColumnResizing : true,
    noUnselect : false,
    infiniteScrollRowsFromEnd : 1,
    selectAll : false,
    multiSelect : true,
    enableGridMenu : true,
    exporterMenuPdf : false,
    exporterCsvFilename : 'vehicules_attente.csv',
    exporterCsvLinkElement : angular.element(document.querySelectorAll(".custom-csv-link-location")),
    onRegisterApi : function(gridApi) {
       `$scope.gridApi = gridApi;
        $scope.gridApi.grid.registerRowsProcessor($scope.searchFilter, 200);
       `gridApi.infiniteScroll.on.needLoadMoreData($scope, $scope.getDataDown);
        $scope.gridApi.selection.on.rowSelectionChanged($scope, activeButtons);
        $scope.gridApi.selection.on.rowSelectionChangedBatch($scope, activeButtons);
    }
   `};

inititilization of columns

      $scope.gridOptions.columnDefs = [ {
    field : 'id',
    displayName : "-",
    resizable : false,
    visible : false
    } ];

Columns update :

        ServiceProvider.columns.getColumn({id:$scope.profile.id},function(data){        
    data.columns.forEach(function(item) {
        cols.push({
        field : "" + item.field + "",
        displayName : "" + item.displayName + "",
        id : "" + item.id + "",
        width: item.width,
        cellFilter: getCellFilter(item)         
       });
        fields.push(item.field);
    });

    $scope.gridOptions.columnDefs = cols;
    $scope.gridOptions.fields = fields;
    });

[rboughani]

i have found the solution, i juste add

        style="width:100%"

and it work fine

[rboughani]

I have another problem now, the scroller in firefox don't scroll the header, it scroller juste the body !!

[rboughani]

When i remove the "position: inherit;" in this class : ".ui-grid-render-container", the scroll work in the header using firefox

.ui-grid-render-container {
position: inherit;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}

[angular-git-user]

I had the similar issue which happened when grid comes from a hidden state or when there are some collapsible pannels on the page and the grid always changes position from the screen.. don't know youre case but you can still try this.

$interval( function() { $scope.gridApi.core.handleWindowResize(); }, 500, 5);

http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

[rboughani]

Thank's for your response, yes it work, now i remember that i have the same problème with Angular datatable, and i have solved it with Something like WindowResize,

but why it dosn't work just in firefox !! and it's possible de solve theme juste with css ? Thank you

[angular-git-user]

no idea why, and yes its not possible via css