Tuesday, March 24, 2009

setting cell height of a grid

Actually the cell height of the grid in gxt changes based on the text and the initial line height is set to 15px. I tried to set it through CSS, but i wasn’t able to. So i decided to change the CSS in the “ext-all.css” which is a very bad idea. But this is one of the easier approaches that i could think of, but it works since we have javascript developed for each module as such, so using the changed CSS for one module doesn’t effect much. Anyways, the following has been modified to change the height of the cell to 50px.

.x-grid3-cell-inner
{
    HEIGHT : 50px;
    PADDING-BOTTOM: 3px;
    PADDING-LEFT: 5px;
    TEXT-OVERFLOW: ellipsis;
    PADDING-RIGHT: 3px;
    WHITE-SPACE: nowrap;
    OVERFLOW: hidden;
    PADDING-TOP: 3px;
    border: 1px solid #ffff;
    -o-text-overflow: ellipsis
}
and also 
.x-grid3-row TD
{
    LINE-HEIGHT : 15px;
    PADDING-LEFT: 1px;
    PADDING-RIGHT: 1px;
    VERTICAL-ALIGN: top;
    -moz-user-select: none
}

I am adding the highlighted attributes to the CSS, which will set the cell height to 50px and the line height for the cell to be 15px. So, the cell is display a total of 3 lines correctly.

No comments: