3.2.0

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
StefK
March 9,
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;
}
Alex (ActiveWidgets)
March 9,
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 Sharma
April 12,
@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

StefK
April 24,
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
}
StefK
April 24,
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.
StefK
April 24,

This topic is archived.

See also:


Back to support forum