I'm using angular ui-grid and have a long grid with almost 30 columns, I want to set fixed width for columns so that at least column header can be seen easily. Is there a way to set, say 10% width for all the columns, or I have to do it for each column one by one.
After setting the min-width on ui-grid-header-cell many columns got combined into one
.ui-grid-header-cell {
min-width: 150px !important;
}
After you have set your column definitions, you can add the following
for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
$scope.gridOptions.columnDefs[i].width = '10%';
}
This will set all of the columns to the width you select. With 30 columns at 10% the user will use the horizontal scrollbar to see all the columns, as you prefer. I didn't change any CSS.