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

4 posts, 1 answers
  1. LamKhoa
    LamKhoa avatar
    92 posts
    Member since:
    Jun 2011

    Posted 19 Oct 2012 Link to this post

    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.


  2. Answer
    Slav avatar
    1359 posts

    Posted 24 Oct 2012 Link to this post

    Hello LamKhoa,

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

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Chris
    Chris avatar
    6 posts
    Member since:
    Jan 2015

    Posted 09 Apr 2015 in reply to Slav Link to this post

    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.
  4. Slav
    Slav avatar
    1359 posts

    Posted 14 Apr 2015 Link to this post


    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.


    See What's Next in App Development. Register for TelerikNEXT.

Back to Top