css - How do I center a button in an angular-ui-grid cell? -
i define column 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 col.coldef.name"> <div class="ng-scope"> <button ng-click="grid.appscope.rowbuttonhandler(row.entity.id)"></button> </div> </div>
i want center button vertically , horizontally. horizontally, works, vertically, can't seem css right. here's generic shot @ it:
.ui-grid-vcenter div { text-align: center; vertical-align: middle !important; background-color: yellow !important; }
how 1 center content in cell in kind of angularjs grid?
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%); }
Comments
Post a Comment