This is a migrated thread and some comments may be shown as answers.

ButtonGroup text not aligning correctly & cutting off

1 Answer 66 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 11 Jul 2012, 03:48 PM
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>

1 Answer, 1 is accepted

Sort by
0
Helen
Telerik team
answered on 12 Jul 2012, 08:39 AM
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.
Tags
RibbonBar
Asked by
Robert
Top achievements
Rank 1
Answers by
Helen
Telerik team
Share this question
or