RibbonBar inside RadSplitter massed output

[Barbaros Saglamtimur]

Hi,
I have a ribbonbar inside RadSplitter's pane, but its output is messed (actually first RibbonBarGroup). The ribbonbar's output is as expected if its standalone. For your convenience, I have attached screen-shot.

Here is my aspx code:

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" ClientIDMode="Static">
            <telerik:RadPane runat="server" ID="RadPane1" Width="90%">
                <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server" SelectedTabIndex="0" EnableViewState="False"
                    RenderInactiveContextualTabGroups="False">
                    <Tabs>
                        <telerik:RibbonBarTab ID="RibbonBarTab1" runat="server" Container="" ParentWebControl="RadRibbonBar1"
                            Selected="True" Text="RibbonBarTab1">
                            <telerik:RibbonBarGroup runat="server" Container="" ParentWebControl="RadRibbonBar1"
                                Text="RibbonBarGroup1">
                                <Items>
                                    <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                        ImageUrl="~/images/floppy_disk_green.png" ParentWebControl="" QuickAccess="Disabled"
                                        Size="Large" Text="save" Width="70px" />
                                    <telerik:RibbonBarTemplateItem runat="server" Container="" Group="" ParentWebControl=""
                                        Size="Small">
                                        <Template>
                                            <table border="0" cellpadding="0" cellspacing="0" style="margin-left: 5px;">
                                                <tr>
                                                    <td>
                                                        <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="90px">
                                                            <Items>
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="Cambria" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Selected="True" Text="Calibri" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="Arial" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="Book Antiqua" />
                                                            </Items>
                                                        </telerik:RadComboBox>
                                                    </td>
                                                    <td rowspan="3">
                                                        <asp:RadioButtonList ID="ColourRadioButtonLista" runat="server">
                                                            <asp:ListItem Value="0">option1</asp:ListItem>
                                                            <asp:ListItem Selected="True" Value="1">option2</asp:ListItem>
                                                            <asp:ListItem Value="2">option3</asp:ListItem>
                                                        </asp:RadioButtonList>
                                                    </td>
                                                    <td>
                                                        <asp:CheckBox ID="CheckBox1aaa" runat="server" ClientIDMode="Static" Text="CheckBox1a" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <asp:Label ID="Label1" runat="server" Text="Group 2 :"></asp:Label>
                                                        <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="90px">
                                                            <Items>
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="100" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="200" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Selected="True" Text="300" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="400" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="500" />
                                                                <telerik:RadComboBoxItem runat="server" Owner="" Text="600" />
                                                            </Items>
                                                        </telerik:RadComboBox>
                                                    </td>
                                                    <td>
                                                        <asp:CheckBox ID="CheckBox3" runat="server" Checked="True" Text="CheckBox3" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <asp:CheckBox ID="CheckBox1" runat="server" Text="CheckBox1" />
                                                    </td>
                                                    <td>
                                                        <asp:CheckBox ID="CheckBox4" runat="server" Text="CheckBox4" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </Template>
                                    </telerik:RibbonBarTemplateItem>
                                </Items>
                            </telerik:RibbonBarGroup>
                            <telerik:RibbonBarGroup runat="server" Container="" ParentWebControl="RadRibbonBar1"
                                Text="RibbonBarGrou2">
                                <Items>
                                    <telerik:RibbonBarButtonStrip runat="server" Container="" Group="" ParentWebControl="">
                                        <Buttons>
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/first.png" ParentWebControl="" QuickAccess="Disabled" Text="first"
                                                ToolTip="first" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/navigate_left.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="prev" ToolTip="prev" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/navigate_right.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="next" ToolTip="next" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/last.png" ParentWebControl="" QuickAccess="Disabled" Text="last"
                                                ToolTip="last" />
                                        </Buttons>
                                    </telerik:RibbonBarButtonStrip>
                                    <telerik:RibbonBarTemplateItem runat="server" Container="" Group="" ParentWebControl=""
                                        Size="Small">
                                        <Template>
                                            <table border="0" cellpadding="0" cellspacing="0" style="margin: 7px auto auto 15px;">
                                                <tr>
                                                    <td>
                                                        Info :
                                                    </td>
                                                    <td>
                                                        <asp:Label ID="Label2" runat="server" Style="margin: 0px 5px 0px 5px;" Text="0"></asp:Label>
                                                    </td>
                                                    <td>
                                                        /
                                                    </td>
                                                    <td>
                                                        <asp:Label ID="Label3" runat="server" Style="margin: 0px 5px 0px 5px;" Text="1"></asp:Label>
                                                    </td>
                                                </tr>
                                            </table>
                                        </Template>
                                    </telerik:RibbonBarTemplateItem>
                                    <telerik:RibbonBarButtonStrip runat="server" Container="" Group="" ParentWebControl="">
                                        <Buttons>
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/delete_selection.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="Delete one" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/delete_all.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="Delete all" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/documents_exchange.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="Change" />
                                        </Buttons>
                                    </telerik:RibbonBarButtonStrip>
                                </Items>
                            </telerik:RibbonBarGroup>
                            <telerik:RibbonBarGroup runat="server" Container="" ParentWebControl="RadRibbonBar1"
                                Text="RibbonBarGroup3">
                                <Items>
                                    <telerik:RibbonBarButtonStrip runat="server" Container="" Group="" ParentWebControl="">
                                        <Buttons>
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/rotate_left.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="rotate left" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/rotate_right.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="rotate right" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/mirror.png" ParentWebControl="" QuickAccess="Disabled" Text="mirror" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/flip.png" ParentWebControl="" QuickAccess="Disabled" Text="flip" />
                                        </Buttons>
                                    </telerik:RibbonBarButtonStrip>
                                    <telerik:RibbonBarButtonStrip runat="server" Container="" Group="" ParentWebControl="">
                                        <Buttons>
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/zoom_in.png" ParentWebControl="" QuickAccess="Disabled" Text="zoom in" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/zoom_out.png" ParentWebControl="" QuickAccess="Disabled" Text="zoom out" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/fit.png" ParentWebControl="" QuickAccess="Disabled" Text="fit" />
                                            <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/view_1_1.png" ParentWebControl="" QuickAccess="Disabled" Text="1:1" />
                                        </Buttons>
                                    </telerik:RibbonBarButtonStrip>
                                    <telerik:RibbonBarButtonStrip runat="server" Container="" Group="" ParentWebControl="">
                                        <Buttons>
                                            <telerik:RibbonBarToggleButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/cursor_hand.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="hand" Toggled="True" Value="hand" />
                                            <telerik:RibbonBarToggleButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                                ImageUrl="~/images/cursor_plus.png" ParentWebControl="" QuickAccess="Disabled"
                                                Text="plus" Value="plus" />
                                            <telerik:RibbonBarButton runat="server" Container="" DisabledImageUrl="~/images/cut_disabled.png"
                                                Enabled="False" Group="" ImageRenderingMode="Clip" ImageUrl="~/images/cut_enabled.png"
                                                ParentWebControl="" QuickAccess="Disabled" Text="cut" Value="cut" />
                                        </Buttons>
                                    </telerik:RibbonBarButtonStrip>
                                </Items>
                            </telerik:RibbonBarGroup>
                            <telerik:RibbonBarGroup runat="server" Container="" ParentWebControl="RadRibbonBar1"
                                Text="RibbonBarGroup4">
                                <Items>
                                    <telerik:RibbonBarButton runat="server" Container="" Group="" ImageRenderingMode="Clip"
                                        ImageUrl="~/images/floppy_disk_green.png" ParentWebControl="" QuickAccess="Disabled"
                                        Size="Large" Text="save" />
                                    <telerik:RibbonBarTemplateItem runat="server" Container="" Group="" ParentWebControl=""
                                        Size="Small">
                                        <Template>
                                            <table border="0" cellpadding="0" cellspacing="0" style="">
                                                <tr>
                                                    <td>
                                                        <input id="jpgRadio" checked="checked" name="ImageType" type="radio" value="opt1"> opt1
                                                        </input>
                                                    </td>
                                                    <td>
                                                        <input type="radio" value="opt2" name="ImageType">opt2</input>
                                                    </td>
                                                    <td>
                                                        <input type="checkbox" value="ON" name="chk1" id="chk1">depends on opt2</input>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <input type="radio" value="opt3" name="ImageType">opt3</input>
                                                    </td>
                                                    <td>
                                                        <input type="radio" value="opt4" name="ImageType">Pdf</input>
                                                    </td>
                                                    <td>
                                                        <input type="checkbox" value="ON" name="chk2" id="chk2">depends on opt4</input>
                                                    </td>
                                                </tr>
                                            </table>
                                        </Template>
                                    </telerik:RibbonBarTemplateItem>
                                </Items>
                            </telerik:RibbonBarGroup>
                        </telerik:RibbonBarTab>
                    </Tabs>
                    <KeyboardNavigationSettings CommandKey="Alt" />
                </telerik:RadRibbonBar>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Forward" />
            <telerik:RadPane runat="server" ID="Radpane2" Width="10%">
            </telerik:RadPane>
        </telerik:RadSplitter>

How can I fix this problem?

TIA.

PS: I am using version 2011.3.1317.40

[Kate]

Hello TIA,

We were able to observe the issue as well but I would suggest that you wait for the up coming major release of our controls Q1 2012 that is next week. Since we will introduce some improvements in the resizing of the RadRibbonBar. we believe that simply upgrading to the latest version will fix the issue.     

All the best,
Kate
the Telerik team

[Barbaros Saglamtimur]

Unfortunately nothing changed with Q1 2012.
By the way after a postback, RibbonBar's look switches to expected view.

Edit : I found a solution;setting style="min-width: " for the RadRibbonBar seems working, but is this the ideal solution?

[Ivan Zhekov]

Hi, TIA.

The min-width solution so far is the only one, yet not recommended.

We indeed planed to release improvements for the resizing in the ribbon bar, alas we did not manage to complete the functionality on time, so that will be available in a upcoming internal release (I can't say which one though).

Regards,
Ivan Zhekov
the Telerik team