ButtonGroup text not aligning correctly & cutting off

2 posts, 0 answers
  1. Robert
    Robert avatar
    1 posts
    Member since:
    Jul 2011

    Posted 11 Jul 2012 Link to this post

    I recently updated my controls from a 2011 release to the very latest 2012 release.  After doing this, the ribbonbars on a lot of my pages have a problem regarding the buttongroup text, as illustrated by the attached screenshot.

    You can see that the "View Status" and "Reference" groups text is fine - it's center-aligned and doesn't cut off.  However, the "Account Details" and what should be "View Ownership" group text is clipped and left-aligned.

    As an experiment I removed the "Closed" button from the "View Status" group, and that group then had the same problems as the "Account Details" group - the text is cut off.

    Here is the code in case you need to recreate what i've done:

    <telerik:RadRibbonBar ID="rrbAdmin" runat="server" CssClass="ribbonBar"
        OnClientSelectedTabChanged="showHeaderRibbonBarResizeOverride">
          
        <telerik:RibbonBarTab Text="Browse" ID="rbtBrowse" />
        <telerik:RibbonBarTab Text="Forms" ID="rbtUsers">
            <telerik:RibbonBarGroup Text="Account Details">
                <Items>
                    <telerik:RibbonBarButton Text="Create New<br/>Account" Value="CreateAccountForm" Size="Large" 
                        ImageUrlLarge="../../Images/Icons_32/add_application.png" Visible="false" />                                      
                    <telerik:RibbonBarButton Text="View/Edit<br/>Account Form" Value="EditAccountForm" Size="Large" Enabled="false"
                        ImageUrlLarge="../../Images/Icons_32/edit.png" />
                </Items>
            </telerik:RibbonBarGroup>           
            <telerik:RibbonBarGroup Text="View Status" Value="ViewStatus">
                <Items>
                    <telerik:RibbonBarToggleList ID="ViewList">
                        <ToggleButtons>
                            <telerik:RibbonBarToggleButton Size="Large" Text="Open" Value="btnOpen" Toggled="true" 
                                ImageUrlLarge="../../Images/Icons_32/open.png" />
                            <telerik:RibbonBarToggleButton Size="Large" Text="Closed" Value="btnClosed" 
                                ImageUrlLarge="../../Images/Icons_32/closed.png" />
                        </ToggleButtons>
                    </telerik:RibbonBarToggleList>
                </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="View Ownership" Value="ViewOwnership">
                <Items>
                    <telerik:RibbonBarToggleList ID="RibbonBarToggleList1">
                        <ToggleButtons>
                            <telerik:RibbonBarToggleButton Size="Large" Text="My Accounts" Value="btnMyAccounts" Toggled="true" 
                                ImageUrlLarge="../../Images/Icons_32/user.png"  />
                            <telerik:RibbonBarToggleButton Size="Large" Text="All Accounts" Value="btnAllAccounts"
                                ImageUrlLarge="../../Images/Icons_32/all.png" />
                        </ToggleButtons>
                    </telerik:RibbonBarToggleList>
                </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="Reference">
                <Items>
                    <telerik:RibbonBarButton Size="Large" Text="Group Authority<br />Matrix" 
                        ImageUrlLarge="../../Images/Icons_32/attachment.png" />
                </Items>
            </telerik:RibbonBarGroup>
        </telerik:RibbonBarTab>
        <telerik:RibbonBarTab Text="Reporting" ID="RibbonBarTab1" Value="Reporting">
            <telerik:RibbonBarGroup Text="Report Type">
                <Items>
                    <telerik:RibbonBarToggleList ID="RibbonBarToggleList2">
                        <ToggleButtons>
                            <telerik:RibbonBarToggleButton Size="Large" Text="By Period" Value="byPeriod" Toggled="true" 
                                ImageUrlLarge="../../Images/Icons_32/calendar.png" />
                            <telerik:RibbonBarToggleButton Size="Large" Text="By Customer" Value="byCustomer"
                                ImageUrlLarge="../../Images/Icons_32/user.png" />                            
                        </ToggleButtons>
                    </telerik:RibbonBarToggleList>                                     
                </Items>
            </telerik:RibbonBarGroup>     
        </telerik:RibbonBarTab>
         
    </telerik:RadRibbonBar>
  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 12 Jul 2012 Link to this post

    Hello Robert,

    Thank you for the report.

    The problem is fixed in the latest internal build. You may give it a try and let us know how it goes.

    Kind regards,
    Helen
    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