RibbonBar inside RadSplitter massed output

4 posts, 0 answers
  1. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 03 Feb 2012 Link to this post

    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
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Barbaros Saglamtimur
    Barbaros Saglamtimur avatar
    110 posts
    Member since:
    Jul 2012

    Posted 16 Feb 2012 Link to this post

    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?

    
    
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 20 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top