Search code examples
javascriptcssextjsextjs4

Is it possible to align vertically in Ext.grid.column.Action

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.grid.column.Action

Using an extjs action column I'm able to centre horizontally an icon for the action column, however I'm unable to vertically align the icon, which leads to an odd looking layout.

{
    xtype: 'actioncolumn',
            tooltip: this.self.QUICKLOOK_TOOLTIP,
            tdCls: 'action-column',
            isDisabled: function(view, rowIndex, colIndex, item, record) {
                return !this.quicklookable(record);
            },
            getClass: function(value, metaData, record) {
                return this.quicklookable(record) ? 'bui-icon quicklook' : '';
            },
            itemId: 'activityListOpenQuicklook',
            width: 50,
            align: 'center',
            handler: function(grid, rowIndex, colIndex, item, evt, record, row) {
                this.fireEvent('openQuicklook', record);
            },
            scope: this
}

Does anyone have a solution on how to vertically align using the action column component?

enter image description here

Solution

  • Best way is to add vertical-align: middle; to your CSS, like so:

    .x-grid-cell.action-column {
    vertical-align: middle;
}