ANGULAR-JS : Angular UI-GRID width changing - css

Question

I implemented angular ui-grid which should look like:
Angular ui-grid
But in some scenarios it is becoming like:
Shrinked grid
I need the solution so that the grid width remains intact like in the first image.
It generally shrinks when i hit F12 and then navigate for grid to some other page and then come back.
My grid options are:
$scope.gridOptions = {
enableRowSelection : true,
enableRowHeaderSelection : false,
multiSelect : false,
enableColumnMenus : false,
columnDefs : [ {
"field" : "title",
"displayName" : "Title",
"visible" : true,
"enableHiding" : false,
}, {
"field" : "description",
"displayName" : "Description",
"visible" : true,
"enableHiding" : false
}, {
"field" : "dueDate",
"displayName" : "Due Date (mm/dd/yyyy)",
"cellFilter" : "date:'MM-dd-yyyy HH:mm a'",
"visible" : true,
"enableHiding" : false
}, {
"field" : "status",
"displayName" : "Status",
"visible" : false,
"enableHiding" : false
}, ]
};
HTML:
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="panel panel-default">
<div ui-grid="gridOptions" ui-grid-selection class="grid height-250"></div>
</div>
</div>
Thanks

Answer 1

From looking at the documentation for angular ui grid : http://ui-grid.info/docs/#/tutorial/101_intro, I can make the following suggestions:
Do you have your css defined to something like :
.grid {
width: 500px;
height: 250px;
}
Do you have data in the right format in $scope.gridOptions.data? Are you overriding grid css using eg: float. Its hard to say without a sample plunker.
Have you included the grid css.
I saw the example plunker in the documentation for GridUI: http://plnkr.co/edit/?p=preview and I tried several things, but it was always showing the right width. So its likely to be your external css breaking the layout.
Inspect when its breaking and look for what css is being applied to the shrunk columns and then compare that to the working one. That's the best suggestion I can give here.