RadRibbonBar width 100% and RadPanes

14 posts, 1 answers
  1. szumm
    szumm avatar
    13 posts
    Member since:
    May 2010

    Posted 20 Jul 2011 Link to this post

    Hey,
    i have trouble with using the new RadRibbonBar control. If i set the width of the ribbonbar to 100%, items in one of the RibbonBarGroups are rendered incorrectly - they look like they have set size to medium although it is set to large in the aspx file. Everything goes back to normal if i resize the browser window. Another thing is the rendering of ribbonbarbuttons, please find the screen attached.
    Second thing. If the ribbonbar is placed inside a fixed-height radpane, the RibbonBarMenu is overlayed by radpane.
    I'm using Telerik.Web.UI 2011.2.712.40.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All" EnableRoundedCorners="true" ControlsToSkip="Fieldset" />
        <telerik:RadSplitter runat="Server" ID="RadSplitter1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" VisibleDuringInit="false">
            <telerik:RadPane ID="topPane" runat="server" Height="60px">
                LOGO
                <telerik:RadToolBar runat="server" ID="navigationBar" Skin="Office2007">
                    <Items>
                        <telerik:RadToolBarButton Text="Button 1" />
                        <telerik:RadToolBarButton Text="Button 2" />
                        <telerik:RadToolBarButton Text="Button 3" />
                        <telerik:RadToolBarButton Text="Button 4" />
                        <telerik:RadToolBarButton Text="Button 5" />
                        <telerik:RadToolBarButton Text="Button 6" />
                        <telerik:RadToolBarButton Text="Button 7" />
                        <telerik:RadToolBarButton Text="Button 8" />
                    </Items>
                </telerik:RadToolBar>
            </telerik:RadPane>
            <telerik:RadPane runat="server" ID="contentPane" Scrolling="None">
                <telerik:RadSplitter runat="server" ID="splitter2" BorderStyle="None" PanesBorderSize="0">
                    <telerik:RadPane runat="server" ID="leftPane" Width="220px" MinWidth="220" MaxWidth="220" Scrolling="None">
                        <telerik:RadSplitter runat="server" ID="radSplitter3" BorderStyle="None" PanesBorderSize="0" BorderWidth="0px" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="topLeftPane" BorderStyle="None" BorderWidth="0px" PanesBorderSize="0">
                                top left
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                    <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None" Height="100%" BorderStyle="None" BorderWidth="0px">
                        <telerik:RadSplitter runat="server" ID="RadDesk1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="RadPane1" Height="157px" EnableViewState="false" Scrollable="false" Scrolling="None">
                                <telerik:RadRibbonBar runat="server" ID="ribbonbar1" Width="100%" Skin="Windows7">
                                    <telerik:RibbonBarTab Text="Bar 1" Selected="true">
                                        <telerik:RibbonBarGroup Text="New" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrl="~/img/new1.png" />
                                                <telerik:RibbonBarMenu Size="Large" Text="Item 2" ImageUrl="~/img/new1.png">
                                                    <Items>
                                                        <telerik:RibbonBarMenuItem Text="menu item 1" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 2" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 3" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 4" />
                                                    </Items>
                                                </telerik:RibbonBarMenu>
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Edit" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrl="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 2" ImageUrl="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Export" EnableLauncher="true">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrl="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 2" ImageUrl="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 3" ImageUrl="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 4" ImageUrl="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Delete" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Delete" ImageUrl="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                    </telerik:RibbonBarTab>
                                </telerik:RadRibbonBar>
                            </telerik:RadPane>
                            <telerik:RadPane runat="server" ID="RadPane2" Scrolling="None">
                                content
                                <img src="img/new1.png" />
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                          
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>

    Any suggestions?

    regards,
    Rafal
  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 22 Jul 2011 Link to this post

    Hi Szumm,

    There are two sizes of images supported in RadRibbonBar - Large (32x32) and Small(16x16).
    RadRibbonBar also implements two ImageRenderingModes - Clip and Dual.
    Soon we will provide a help article diving deeper into this topic, but until then, here is the basic idea:
     - ImageRenderingMode=Clip - images are packed in clips (small and large image in a single file(sprite));
     - ImageRenderingMode=Dual - images are all in separate files.

    From the picture you provided looks like you use Dual images, but probably haven't set the ImageRenderingMode to Dual. And since you have large items with only ImageUrl set (you need to set the large icons to the ImageUrlLarge property if you use Dual images), the algorithm takes it as you set a clip image to the ImageUrl property and expect it to contain both pictures.

    Summary:
     - Please, set the ImageRenderingMode of RadRibbonBar to Dual and set large images to ImageUrlLarge property of the RibbonBarItems you create.

    I was not able to understand what is the problem regarding the Width of the RibbonBar. Please, further explain this.

    I hope my response will be helpful for you.

    Regards,
    Nikolay Tsenkov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. szumm
    szumm avatar
    13 posts
    Member since:
    May 2010

    Posted 25 Jul 2011 Link to this post

    Nikolay,
    thank you for your answer it helped me a little but not all of my problems were solved. Since a picture is worth more than thousand words, please find the screen attached. Here's how it looks now. The red rectangle shows the problem with RadRibbonBar & fixed-height RadPane. The green rectangle shows what is the problem with the rendering. Despite the changes in code, one section is rendered with medium sized buttons but when i resize the browser window the control is rerendered correctly.
    Code used:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All" EnableRoundedCorners="true" ControlsToSkip="Fieldset" />
        <telerik:RadSplitter runat="Server" ID="RadSplitter1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" VisibleDuringInit="false">
            <telerik:RadPane ID="topPane" runat="server" Height="60px">
                LOGO
                <telerik:RadToolBar runat="server" ID="navigationBar" Skin="Office2007">
                    <Items>
                        <telerik:RadToolBarButton Text="Button 1" />
                        <telerik:RadToolBarButton Text="Button 2" />
                        <telerik:RadToolBarButton Text="Button 3" />
                        <telerik:RadToolBarButton Text="Button 4" />
                        <telerik:RadToolBarButton Text="Button 5" />
                        <telerik:RadToolBarButton Text="Button 6" />
                        <telerik:RadToolBarButton Text="Button 7" />
                        <telerik:RadToolBarButton Text="Button 8" />
                    </Items>
                </telerik:RadToolBar>
            </telerik:RadPane>
            <telerik:RadPane runat="server" ID="contentPane" Scrolling="None">
                <telerik:RadSplitter runat="server" ID="splitter2" BorderStyle="None" PanesBorderSize="0">
                    <telerik:RadPane runat="server" ID="leftPane" Width="220px" MinWidth="220" MaxWidth="220" Scrolling="None">
                        <telerik:RadSplitter runat="server" ID="radSplitter3" BorderStyle="None" PanesBorderSize="0" BorderWidth="0px" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="topLeftPane" BorderStyle="None" BorderWidth="0px" PanesBorderSize="0">
                                top left
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                    <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None" Height="100%" BorderStyle="None" BorderWidth="0px">
                        <telerik:RadSplitter runat="server" ID="RadDesk1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="RadPane1" Height="157px" EnableViewState="false" Scrollable="false" Scrolling="None">
                                <telerik:RadRibbonBar runat="server" ID="ribbonbar1" Width="100%" Skin="Windows7" ImageRenderingMode="Dual" >
                                    <telerik:RibbonBarTab Text="Bar 1" Selected="true">
                                        <telerik:RibbonBarGroup Text="New" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarMenu Size="Large" Text="Item 2" ImageUrlLarge="~/img/new1.png" >
                                                    <Items>
                                                        <telerik:RibbonBarMenuItem Text="menu item 1" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 2" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 3" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 4" />
                                                    </Items>
                                                </telerik:RibbonBarMenu>
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Edit" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 2" ImageUrlLarge="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Export" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 2" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 3" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 4" ImageUrlLarge="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Delete" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                    </telerik:RibbonBarTab>
                                </telerik:RadRibbonBar>
                            </telerik:RadPane>
                            <telerik:RadPane runat="server" ID="RadPane2" Scrolling="None">
                                content
                                <img src="img/new1.png" />
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                          
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>

    Regards,
    Rafal
  5. szumm
    szumm avatar
    13 posts
    Member since:
    May 2010

    Posted 27 Jul 2011 Link to this post

    Any updates on this?
  6. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 28 Jul 2011 Link to this post

    Hello Szumm,

    The 'Red' issue is caused by the style which RadPanes have by default - overflow: hidden. You can easily work around this by setting the same CSS attribute to 'visible' (below is the code).

    The 'Green' issue is a bug in RadRibbonBar, which we logged in our bug-tracking system. Although we will fix it in the next few months, you can now apply a workaround for it as well.

    Below is the code dealing with both issues (the function is the client-side Load event handler of RRB):
    <script type="text/javascript">
        function onLoad(sender) {
            setTimeout(function() {
                $telerik.$(sender.get_element())
                    .parent("[id^='RAD_SPLITTER_PANE_CONTENT']")
                    .css("overflow", "visible");
            }, 0);
     
            setTimeout(function() {
                sender._adjustByImportance();
                sender._adjustByImportance();
            }, 0);
        }
    </script>

    I also updated your Telerik points for finding and reporting the second issue. If you have additional questions, please let me know.

    Kind regards,
    Simon
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. szumm
    szumm avatar
    13 posts
    Member since:
    May 2010

    Posted 28 Jul 2011 Link to this post

    Dear Simon,
    thank you for your workaround solving both issues, everything is working now like it supposed to:)

    best regards,
    Rafal
  8. jorge garces
    jorge garces avatar
    5 posts
    Member since:
    Dec 2009

    Posted 21 Aug 2011 Link to this post

    Hello!
    I have the same problem and don't work.
    I try with the same code and don't work inclusively with de javascript code, Can not see the menu above Radpane. What I have to do?

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function onLoad(sender) {
                setTimeout(function () {
                    $telerik.$(sender.get_element())
                    .parent("[id='RadPane1']")
                    .css("overflow", "visible");
                }, 0);

                setTimeout(function () {
                    sender._adjustByImportance();
                    sender._adjustByImportance();
                }, 0);
            }
    </script>

    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All" EnableRoundedCorners="true" ControlsToSkip="Fieldset" />
        <telerik:RadSplitter runat="Server" ID="RadSplitter1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" VisibleDuringInit="false">
            <telerik:RadPane ID="topPane" runat="server" Height="60px">
                LOGO
                <telerik:RadToolBar runat="server" ID="navigationBar" Skin="Office2007">
                    <Items>
                        <telerik:RadToolBarButton Text="Button 1" />
                        <telerik:RadToolBarButton Text="Button 2" />
                        <telerik:RadToolBarButton Text="Button 3" />
                        <telerik:RadToolBarButton Text="Button 4" />
                        <telerik:RadToolBarButton Text="Button 5" />
                        <telerik:RadToolBarButton Text="Button 6" />
                        <telerik:RadToolBarButton Text="Button 7" />
                        <telerik:RadToolBarButton Text="Button 8" />
                    </Items>
                </telerik:RadToolBar>
            </telerik:RadPane>
            <telerik:RadPane runat="server" ID="contentPane" Scrolling="None">
                <telerik:RadSplitter runat="server" ID="splitter2" BorderStyle="None" PanesBorderSize="0">
                    <telerik:RadPane runat="server" ID="leftPane" Width="220px" MinWidth="220" MaxWidth="220" Scrolling="None">
                        <telerik:RadSplitter runat="server" ID="radSplitter3" BorderStyle="None" PanesBorderSize="0" BorderWidth="0px" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="topLeftPane" BorderStyle="None" BorderWidth="0px" PanesBorderSize="0">
                                top left
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                    <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None" Height="100%" BorderStyle="None" BorderWidth="0px">
                        <telerik:RadSplitter runat="server" ID="RadDesk1" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">
                            <telerik:RadPane runat="server" ID="RadPane1" Height="157px" EnableViewState="false" Scrollable="false" Scrolling="None">
                                <telerik:RadRibbonBar runat="server" ID="ribbonbar1" Width="100%" Skin="Windows7" ImageRenderingMode="Dual" >
                                    <telerik:RibbonBarTab Text="Bar 1" Selected="true">
                                        <telerik:RibbonBarGroup Text="New" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarMenu Size="Large" Text="Item 2" ImageUrlLarge="~/img/new1.png" >
                                                    <Items>
                                                        <telerik:RibbonBarMenuItem Text="menu item 1" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 2" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 3" />
                                                        <telerik:RibbonBarMenuItem Text="menu item 4" />
                                                    </Items>
                                                </telerik:RibbonBarMenu>
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Edit" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 2" ImageUrlLarge="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Export" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 2" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 3" ImageUrlLarge="~/img/new1.png" />
                                                <telerik:RibbonBarButton Size="Large" Text="Item 4" ImageUrlLarge="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                        <telerik:RibbonBarGroup Text="Delete" EnableLauncher="false">
                                            <Items>
                                                <telerik:RibbonBarButton Size="Large" Text="Item 1" ImageUrlLarge="~/img/new1.png" />
                                            </Items>
                                        </telerik:RibbonBarGroup>
                                    </telerik:RibbonBarTab>
                                </telerik:RadRibbonBar>
                            </telerik:RadPane>
                            <telerik:RadPane runat="server" ID="RadPane2" Scrolling="None">
                                content
                                <img src="img/new1.png" />
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                          
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>
  9. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 22 Aug 2011 Link to this post

    Hello Jorge Garces,

    You have to hook the onLoad function to the client-side Load event of RadRibbonBar to make it work.

    Regards,
    Simon
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  10. Siingh
    Siingh avatar
    32 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2011 Link to this post

    Hi Telerik
    i have tried aboe solution on clientlod of RRB but its not working, RibbonBarMenu inside ribbonbar still overlayed by splitter, I have same problem which is in this thread. please help me to show ribbonbarmenu items on top of radpane.


    Kind Regards:
  11. Siingh
    Siingh avatar
    32 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2011 Link to this post

    Hi Telerik i found a way to show ribbonmenu on top of pane use this code below to work

    function onLoad(sender) {           
                setTimeout(function () {
                    $telerik.$(sender.get_element())
                    .parent("[id^='RAD_SPLITTER_PANE_CONTENT']")
                    .css("overflow", "visible");
                    document.getElementById("RAD_SPLITTER_PANE_CONTENT_RadPane1").style.overflow = 'visible';
                }, 0);
     
                setTimeout(function () {
                    sender._adjustByImportance();
                    sender._adjustByImportance();
                }, 0);           
            }


    Use your view source to see element pane full name and use this line inside telerik code.
    document.getElementById("RAD_SPLITTER_PANE_CONTENT_RadPane1").style.overflow = 'visible';

    Kind Regards:
  12. Justin
    Justin avatar
    4 posts
    Member since:
    Apr 2011

    Posted 21 Nov 2011 Link to this post

    Regarding the response by Simon on July 28th, has the "browser resizing" bug been addressed in a release since the 2011.2.915.40 release?

    Here is a snippet of the response:

    Posted on Jul 28, 2011

    Hello Szumm,

    The 'Red' issue is caused by the style which RadPanes have by default - overflow: hidden. You can easily work around this by setting the same CSS attribute to 'visible' (below is the code).

    The 'Green' issue is a bug in RadRibbonBar, which we logged in our bug-tracking system. Although we will fix it in the next few months, you can now apply a workaround for it as well.



    I am also experiencing this behavior.
  13. szumm
    szumm avatar
    13 posts
    Member since:
    May 2010

    Posted 22 Nov 2011 Link to this post

    Hey Justin,
    I'm currently using the same release version and still have to use the workarund. I'm waiting for the Q3 release, which can be released any day now, to check if the workaround is still necessary.

    szumm
  14. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 22 Nov 2011 Link to this post

    Hi Justin & Szumm,

    Unfortunately the bug is not yet fixed. I will let you know in this thread once it is fixed.

    Greetings,
    Simon
    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
  15. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 30 May 2012 Link to this post

    Hi, all.

    We implemented a new resizing algorithm for the Ribbon and it will make it for the Q2 2012 release, due out next week.

    That said, some of the old methods, such as _adjustByImportance are no longer there, but we have added a client side API for manual resizing.

    We'll write more about the changes in the blogs.

    As a result of these changes, some scenarios might be broken, other might be fixed. Once the release is out, you can get it and test. If there are any issues or you think something is not right -- we are open to feedback, so write us back.

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