How do I center a button in an angular-ui-grid cell?
13,991
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%);
}
Author by
alphadogg
Alphadogg loves macrame, scrapbooking and tearing flesh off forest creatures while pack hunting.
Updated on August 09, 2022Comments
-
alphadogg almost 2 years
I define a 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>' }
Resulting in:
<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, works, but vertically, I can't seem to get the CSS right. Here's my generic shot at it:
.ui-grid-vcenter div { text-align: center; vertical-align: middle !important; background-color: yellow !important; }
How does one center content in a cell in this kind of AngularJS grid?