Vertical align in a column with the HTML templat

Hi Alex,

If possible, can you help with the easiest way to middle v-align the content of a AW.Templates.HTML columns, when row height of the grid is set with something,

grid.setRowHeight(100);

The columns with other templates seem to v-align themselves in the middle, but not the HTML template which stays "top" v-aligned.

Thanks in advance.
Enjoy the day

Try adding line-height: 100px to the grid row template -

.aw-grid-row {
    height: 100px;
    line-height: 100px;
}

Depending on the content and browser you may also add vertical-align: baseline or vertical-align: middle to all inner elements -

.aw-templates-html * {
    vertical-align: baseline;
}

Hi Alex,
I have managed to get the height of the row to 60px. For multiline I aaded br in Microsoft<br>Corporation to display in two line.

I can see only Microsoft in the cell and "Corporation" is no where seen in the cell, even if the height of the cell is increased and made

#myGrid .aw-column-1 .aw-item-text { vertical-align: top; }

to display at the top.

Why I cannot see the "Corporation"????

Thanks.

@Sanjay,

I think you need to apply

white-space : normal;

to the style as well, to see multiple lines in the grid.

@Alex,

Sorry for bugging again, I'm still having trouble with this issue.

I have included the styles you mentioned above :

.aw-grid-row {
    height: 100px;
    line-height: 100px;
}

.aw-templates-html *{
    vertical-align : middle;
}

I found the following.
1) The row height is adjusted correctly to 100px, but
2) The style in ".aw-templates-html *", has no effect.
To test, I have also applied random viewable styles to "aw-templates-html" such as

.aw-templates-html {
    border : solid 1px red;
    background-color : blue;
}

, but they have no effect.

Just FYI, I am setting the column template with

grid.setCellTemplate(new AW.Templates.HTML,2);

Can you please assist with any ideas on why this is not working?
Thanks

PS: @Sanjay,

Another way to apply text wrapping to a column is :

grid.getCellTemplate(column).setClass("text","wrap");

Remember to apply the margin fix discussed in the forum too :

/*Override to fix text wrap margin*/
.aw-gecko .aw-text-wrap .aw-item-text {
    margin-left : 0px
}

Nevermind. :-)

I sorted out the alignment problem, simply by not applying the "AW.Templates.HTML" template to the column in question. The HTML still gets rendered in the grid.
Also I'm applying :

obj.getRowTemplate().setClass("text", "wrap");

IE apply text wrap to the whole row and not one column at a time, as mentioned above.

Thanks though.