verical-align broken?

I'm trying to vertically align cells contents in the entire grid to the middle, and have no luck so far. Something seems to be broken. I can use basic.html from \examples\grid as an example.

Here are my modifications to the <style>:

1. I increase the row height to make vertical alignment effects more pronounced:

.active-grid-row,
.active-grid-row .active-list-item,
.active-scroll-left .active-list-item {height: 40px;}

2. Apply vertical align to 1 or more (or all) columns, e.g.:

.active-column-0,
.active-column-1,
.active-column-2,
.active-column-3,
.active-column-4 {vertical-align:middle;}

When style is applied to all columns, there's no effect whatsoever.
When style is applied to some, but not all columns, the behaviour in IE and FireFox differs:

a) IE gets it almost right, except border-right of affected cells which normally make up gridlines are a little short.

b) FireFox screws it up completely. Firstly, cell contents of wrong columns gets vertically centered, precisely those NOT targeted by vertical-align:middle. Secondly, try to select any row and see it has irregular width now. Thirdly, borders are short again.

Am I doing anything wrong?

Cheers

You can't align text vertically with the default cell template Active.Templates.Text - it is just single DIV element (for maximum speed). If you use Active.Templates.Item instead it will align text properly, but has more complex layout (two nested DIVs plus another one for the image) so may be slow.

With Active.Templates.Text you can set the line height being equal to the row height and this will give impression that the text is in the middle of the row.

Alex,

Thanks for the workaround, it worked like a charm.

Best,

Do you mean like this?

.active-grid-row,
.active-grid-row .active-list-item,
.active-scroll-left .active-list-item {height: 40px;}

.active-row-cell {line-height: 40px;}

This works OK, for single line text anyway...