EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jrnfs on June 15, 2015, 12:48:03 PM

Title: vertical-align on datagrid cell
Post by: jrnfs on June 15, 2015, 12:48:03 PM

Hi,

How can I change the vertical-align to 'top' or 'bottom' instead of middle?

Is it possible? I found no reference.

Tks,

Title: Re: vertical-align on datagrid cell
Post by: stworthy on June 15, 2015, 05:21:48 PM

Use the column's 'formatter' function to format the values.

Code:

$('#dg').datagrid({
	columns:[[
		{field:'itemid',title:'ItemId',width:80,
			formatter:function(value,row){
				return '<div style="height:25px;line-height:12px">'+value+'</div>';
			}
		}
	]]
})

or override the '.datagrid-body td' CSS style.

Code:

<style>
    .datagrid-body td{
        vertical-align: bottom;
    }
</style>

Title: Re: vertical-align on datagrid cell
Post by: jrnfs on June 15, 2015, 05:37:29 PM

tks,

Title: Re: vertical-align on datagrid cell
Post by: jrnfs on June 16, 2015, 07:07:06 AM

...btw, and how can I change the padding value of a column?
tks,

Title: Re: vertical-align on datagrid cell
Post by: stworthy on June 16, 2015, 05:18:09 PM

Please try this:

Code:

<style>
    .datagrid-body td{
        vertical-align: bottom;
    }
    .datagrid-cell,
    .datagrid-cell-group,
    .datagrid-header-rownumber,
    .datagrid-cell-rownumber {
        padding:5px 6px;
    }
</style>

Title: Re: vertical-align on datagrid cell
Post by: jrnfs on June 16, 2015, 07:13:58 PM

tks, again!