Radbutton text not centered when using set width and splitbutton=true

2 posts, 0 answers
  1. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 27 Feb 2013 Link to this post

    When I enabled SplitButton on a RadButton, I noticed the button text was centered in relation to the entire button including the split arrow.  I found that when setting a width on the button (in aspx or code-behind), that this occurs.  If I remove the set width, the button text now centers in relation to the non-split/arrow area.  I basically just removed the set width when I dynamically split the button and add the set width when I don't need to split, so work-around was easy.  I just wanted to point this out in case anyone else has encountered or if there is just some style/attribute/property I'm missing.
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 01 Mar 2013 Link to this post

    Hello Bob,

    This behavior is caused due to the specifics of the rendering of the SplitButton when its width property is set. If you want, however, to center that text you can use the .rbDecorated.rbSecondary selectors and set the appropriate right padding of the input. For example:

    <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton1" EnableSplitButton="true" Width="150px">
    </telerik:RadButton>
    The text in the above SplitButton having width of 150px can be centered with padding-right: 25px:

    <style type="text/css">
        .rbDecorated.rbSecondary
        {
            padding-right: 25px !important;
        }
     
    </style>



    Kind regards,
    Danail Vasilev
    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top