How to set up a button in an angular -ui-grid cell?

Question

I define the column as follows:

{ name: 'button', displayName: '', cellClass: 'ui-grid-vcenter', enableColumnMenu: false, enableFiltering: false, enableSorting: false, cellTemplate: '<div><button ng-click="grid.appScope.rowButtonHandler(row.entity.id)">clicky</button></div>' } 

Result:

 <div class="ui-grid-cell ng-scope ui-grid-coluiGrid-010 ui-grid-vcenter" ui-grid-cell="" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"> <div class="ng-scope"> <button ng-click="grid.appScope.rowButtonHandler(row.entity.id)"></button> </div> </div> 

I want to center this button vertically and horizontally. Horizontally, it works, but vertically, I cannot get CSS correctly. Here is my general snapshot:

 .ui-grid-vcenter div { text-align: center; vertical-align: middle !important; background-color: yellow !important; } 

How is one central content in a cell of this kind of AngularJS grid?

Answer 1

Use relative position:

 .ui-grid-vcenter div { background-color: yellow !important; text-align:center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

Answer 2

Using css flex will make it a lot easier ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ):

Suppose your cellTemplate ( myCellTemplateForEditAndDelBtns.html ):

 <div id="editBtns" class="flexParent"> <span class="flexChildren"> <button><i class="fa fa-pencil-square-o "></i></button> <button><i class="fa fa-times gridDelBtn"></i></button> </span> </div> 

You add it to columDefs in your cell:

 $scope.myGrid.columnDefs = [ ... { name: 'edit', enableCellEdit: false, enableFiltering: false, enableSorting: false, cellTemplate: 'location-to/myCellTemplateForEditAndDelBtns.html', width: '5%' } ]; 

Finally, use CSS Flex :

 #editBtns { height: 100%; } .flexParent { display: flex; justify-content: center; } .flexChildren { align-self: center; }