Misalignment between the grid content and the select checkbox column

[clalag]

you can see the live demo here http://ui-grid.info/docs/#/tutorial/401_AllFeatures

[AgDude]

I just ran into this also, but updating to RC21 solved it.

[JayHuang]

I have this issue also. Only surfaced since updating to RC21, and the demo has the same issue; it's using RC21 too.

[donnygunawan93]

how can fix this?

[AgDude]

I tried reproducing this in a plunkr, and cannot do so consistently. I got the issue to appear once, but can't get it to show up again after refreshing. Will someone please provide a provide a plunkr which demonstrates the problem (please specify your browser version and platform also).

[JayHuang]

This seems to be the same bug detailed in #3412

[AgDude]

@JayHuang, I believe this is not the same bug as #3412. I have not looked in more detail at where this is generated, but problem has to do with the css which is generated and inserted into a style element. I just observed this on the Grouping tutorial page.

This is the offending line:

grid1430839489202 .ui-grid-render-container-left .ui-grid-header-canvas { height: inherit; }

On a grid which is displaying properly, this selector has height set to a pixel value.

[anwarhamr]

Would this be related? I have a grid when we resize or sort any of the colums the Select all checkbox collapses moving up the other checkboxs so they are not aligned correctly w/ the row. Only seems to be happening when enableSelectAll set to false.

Grid config:
$scope.gridOptions = {
data: 'discoveredMachines',
columnDefs: [
{
field: 'MachineMacAddress',
name: 'Mac Address',
displayName: 'MAC Address',
width: ""
},
{
field: 'IpV4Address',
name: 'Ip Address',
displayName: 'IP Address',
width: ""
}
],
headerRowHeight: 36,
enableColumnResizing: true,
enableHeaderRowSelection: true,
enableSelectAll: false,
multiSelect: false,
onRegisterApi: function (gridApi) {
//set gridApi on scope
$scope.gridApi = gridApi;

        //allow the click of a row to select the row.
        gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol) {
            if (newRowCol.col.field !== "selectionRowHeaderCol")
                $scope.gridApi.selection.toggleRowSelection(newRowCol.row.entity);
        });
    }
};

[PaulL1]

I think this is the issue that @AgDude has tied all the various height issues to. Basically any column without a filter will get out of alignment, which is caused by the header height calculation changes. I thought we'd reverted and/or fixed this, but it's still doing it on the all features tutorial: http://ui-grid.info/docs/#/tutorial/401_AllFeatures

@anwarhamr : I think your issue may be different, it sounds like an issue with the selectAll header getting messed up. Does it only do it to you when enableSelectAll is false, or does it do it irrespective (in which case it is probably a duplicate of this issue).

[anwarhamr]

That is correct, it works correctly when we allow select all. But this once case we loose the size when we do something else to a different row and the grid redraws

Thanks, Rob

[c0bra]

This should be fixed with #3424, which is now merged. Can we confirm?

[PaulL1]

Looks solved to me on the tutorials.

[vschimpf]

I'm still reproducing this issue.
I'm using version 4.0.0

[keremerboke]

I have the same problem enableSelectAll:false was removed but problem is still going on...

ver 4.0.6