Angular UI GRID: How to delete extra footer and small column on right?

Question

I have an issue with deleting extra sapce in ui-grid. Here is a plunkr:

http://plnkr.co/edit/gKqt8JEo2FukS3URRLJ5?p=preview

As you can see, there is extra space on bottom, and on the right hand side, after the last column (within the table). I was wondering how can I get rid of that?

Here is my data:

 $scope.myData = [{
    "firstName": "Cox",
    "lastName": "Carney",
    "company": "Enormo",
    "employed": true
  }, {
    "firstName": "Lorraine",
    "lastName": "Wise",
    "company": "Comveyer",
    "employed": false
  }, {
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
  }];

Answer 1

Your css defined that dimention for the grid, so if you change the css to 100%, like this:

.grid {
  width: 100%;
  height: 100%;
}

It will take all width and height of the page.

For the scrol to be removed use:

.ui-grid-viewport {
   overflow: auto !important;
}

This will override the grid css, but you can't completly remove it because of the component you use.