Vertical alignment in grid cell

[Joe WeinpertParticipant]

I am using the cell rendering feature to place text into a cell. The grid’s height and its row height are set to automatic handling different amounts of data provided to the grid in a different column. How can I vertically center the text in cells in the grid with varying row heights?

[HristoParticipant]

Hello Joe Weinpert,

Please, try with vertical-align: middle; CSS.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Joe WeinpertParticipant]

Creating a class like:

   .verticalAlign{
      vertical-align: middle;
   }

and then using the cell attribute:

cellclassname: "verticalAlign"

does not work. The text is still rendered at the top of the cell rather than the middle. As mentioned before, I am using the cell attribute:

cellsrenderer: textRenderer

[Joe WeinpertParticipant]

This does work except for a major problem;

cellTextRenderer = function( row, dataField, value, defaultHTML, columnProperties, rowData ){
   return "<table style='width: 100%; height: 100%;'><tr><td style='padding: 0px 4px; vertical-align: middle;'>" + rowData.ActionDescribe + "</td></tr></table>"
}

The problem happens when, after the cell is rendered, and I click on a columntype: checkbox cell in the grid, all the row heights in the whole grid keep getting bigger on each click. This problem is being caused by the height: 100%;

Any ideas?

[HristoParticipant]

Hello Joe Weinpert,

Unfortunately, we do not have such demo.
I prepare one example, please, take a look at this workaround.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Joe WeinpertParticipant]

Thanks for the workaround example! I see the requirements are to use a margin attribute rather then a height attribute within any cellsrenderer function. The height attribute was basing itself on the overall grid height and not the current row division height … which is why the each row in the grid would expand on any click until the 100% value was achieved.

A cellbeginedit function has the ability to get the height of the current row we are doing something in because each row has its own ID generated by jQWidgets. (row0GridName, row1GridName, row2GridName, … ).

$( "#row0GridName" ).height() works fine within any cellbeginedit function, however, it does not work from within a cellsrenderer function. My guess is because all the cells in the row are being rendered and the height would not be fixed until rendering is done.

[Author]

Posts