PDA

View Full Version : How to set Grid Column Padding ?



roosevelt
30 Aug 2011, 8:21 AM
Hi,

I configured a Grid panel and need to adjust the Padding for the Column name. I tried the following configurations for the column, but it is not applying/overriding the padding :(




{
"header":"Column Name",
"dataIndex":"column_index",
"flex":1,"align":"center",
"height":60,
"style":{
"padding-top":"0px"
}
}

It still generates the following HTML



<div class="x-column-header-inner" id="ext-gen1368" style="height: 60px; padding-top: 23.5px;">
<span class="x-column-header-text" id="ext-gen1370">Column Name</span>
<div class="x-column-header-trigger" id="ext-gen1369">
</div>
</div>

Thanks

gkohen
28 May 2014, 6:43 AM
Unfortunately the style property is not being transferred to the cell. Instead define yourself a class with the proper padding. Example:

.ua-grid-delete-button-cell {
padding:4px 6px 3px 0px;
}

Then add that to your column definition:


{
"header":"Column Name",
"dataIndex":"column_index",
"flex":1,"align":"center",
"height":60,
"innerCls":"ua-grid-delete-button-cell"
}

P.S: There is no need to put quotes around JS property names. It is required only in JSON.