Vertical Alignment error for RadButton in TableCell (Telerik AJAX 2012 Q3)

[LamKhoa]

I have created a TableCell dynamically in the code behind, then add a RadButton (Toggle ButtonType - CheckBox). But after I installed the latest Telerik AJAX Version 2012 Q3, the vertical alignment of it inside a TableCell suddenly gone wrong.

Attached, please find:

1. Before.png: This is how RadButton is like in Telerik AJAX 2012 Q2
2. After.png    : This is how RadButton is like in Telerik AJAX 2012 Q3.

Thanks

Lamk.

[Slav]

Hello LamKhoa,

Please specify a height for the RadButton via its property Height and the problem will be resolved.

Regards,
Slav
the Telerik team

[Chris]

The height property doesn't change the height of the button relative to the other text inside the <td> it just pads the floor of the cell. Interestingly, if you add text to the checkbox/toggle-button, it lines things up vertically but adds a bizarre amount of horizontal space.

[Slav]

Hi,

The checkbox element of RadButton remains at the top when raising the Height of the control, because it uses the primary icon element, which is absolutely positioned.

There are three possible approaches to adjust the checkbox in the described scenario:

• Do not set the Height property of RadButton. The issue that was reported in this thread originally does not occur with the latest version of the Telerik controls, so the button with be vertically centered in the table cell if no height is set for the button.
• Use the Icon-PrimaryIconTop property to adjust the the vertical position of the checkbox element.
• Use the Lightweight render mode of the button control (RenderMode="Lightweight"). This rendering does not use absolute positioning for its icons and the checkbox element will be vertically centered when raising the height of the control.

Regards,
Slav
Telerik