CODEWITHSUNDEEP
angularjstwitter-bootstrap-3ng-grid
Edminsson
Edminsson

Reputation: 2506

How to get som space around a bootstrap button inside ng-grid

I have an ng-grid with some bootstrap buttons. 

var activetemplate = '<div class="ngCellText" ng-cell-text ng-class="col.colIndex()"><span ng-class="getClass(row.entity.active)"></span> </div>'
var buttontemplate = '<div class="ngCellText" ng-cell-text ng-class="col.colIndex()"><button class="btn btn-warning btn-sm" ng-click="edit(row.entity.name)"><span class="glyphicon glyphicon-pencil">Edit</span></button></div>';
var buttontemplate2 = '<div><button class="btn btn-warning btn-sm" ng-click="edit(row.entity.name)"><span class="glyphicon glyphicon-pencil">Edit</span></button></div>';

$scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{field: 'name', displayName: 'Name'},
                 {field:'age', displayName:'Age', cellTemplate: activetemplate},
                 {displayName:'Edit', cellTemplate: buttontemplate},
                 {displayName:'Edit', cellTemplate: buttontemplate2}
                 ]
    };

As you can see in this PLUNK the buttons on the rightmost column are practically touching each other and I would like some space between them.

I've tried to change the padding and tried some classes as you can see on the button column to the left. But I can't make it work.

Upvotes: 0

Views: 422

Answers (1)

Joao Leal
Joao Leal

Reputation: 5542

You either make the button smaller, or change the height of the cells using the gridOptions object:

$scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{field: 'name', displayName: 'Name'},
                 {field:'age', displayName:'Age', cellTemplate: activetemplate},
                 {displayName:'Edit', cellTemplate: buttontemplate},
                 {displayName:'Edit', cellTemplate: buttontemplate2}
                 ],
    rowHeight: 40
    };

Upvotes: 2

Related Questions