Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadRibbonBar width 100% and RadPanes

13 Answers 204 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
szumm
Top achievements
Rank 1
szumm asked on 20 Jul 2011, 01:04 PM
screen.png
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

13 Answers, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 22 Jul 2011, 09:23 AM
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!

0
szumm
Top achievements
Rank 1
answered on 25 Jul 2011, 10:45 AM
screen1.png
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
0
szumm
Top achievements
Rank 1
answered on 27 Jul 2011, 03:28 PM
Any updates on this?
0
Accepted
Simon
Telerik team
answered on 28 Jul 2011, 02:15 PM
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.

0
szumm
Top achievements
Rank 1
answered on 28 Jul 2011, 03:45 PM
Dear Simon,
thank you for your workaround solving both issues, everything is working now like it supposed to:)

best regards,
Rafal
0
jorge garces
Top achievements
Rank 1
answered on 22 Aug 2011, 01:45 AM
Error.jpg
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>
0
Simon
Telerik team
answered on 22 Aug 2011, 08:38 AM
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 >>

0
Siingh
Top achievements
Rank 2
answered on 24 Aug 2011, 02:50 AM
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:
0
Siingh
Top achievements
Rank 2
answered on 24 Aug 2011, 03:15 AM
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:
0
Josh
Top achievements
Rank 1
answered on 21 Nov 2011, 06:18 PM
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.
0
szumm
Top achievements
Rank 1
answered on 22 Nov 2011, 10:57 AM
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
0
Simon
Telerik team
answered on 22 Nov 2011, 12:10 PM
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
0
Ivan Zhekov
Telerik team
answered on 30 May 2012, 07:54 AM
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.
Tags
RibbonBar
Asked by
szumm
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
szumm
Top achievements
Rank 1
Simon
Telerik team
jorge garces
Top achievements
Rank 1
Siingh
Top achievements
Rank 2
Josh
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or