Sliding Pane and Foxfire

3 posts, 0 answers
  1. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 20 May 2009 Link to this post

    I have set up a sliding pane within a splitter and i dynamically add in control to it (an ascx control).  What i want it to do is if i add in more controls than the height of the splitter then it should use the scroll Y bar.

    I have this working successfully in IE8 but when it comes to Foxfire it seems that the height of the sliding pane extends past the height of the splitter it is contained in by about the height of the header of the sliding pane.  What this results in is the page rendering the controls and the Y scroll bar with the down arrow of the scroll bar not visible.

    is this an issue with the sliding pane and FF?
  2. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 20 May 2009 Link to this post

    This is my structure:

    <head runat="server"
        <title>Untitled Page</title> 
        <style type="text/css"
        html, body, form   
            height: 100%;   
            margin: 0px;   
            padding: 0px;   
            overflow: hidden;   
        <form id="form1" runat="server"
        <div style="height:100%"
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"
           <telerik:RadSplitter ID="RadSplitter1" Runat="server" 
                        Skin="Outlook" SplitBarsSize="" Width="100%" Height="100%"
                        <telerik:RadPane ID="RadPane1" Runat="server" Scrolling="None"
                            <div style="height: 100%; width: 100%; overflow: hidden; background-color: #00FFFF;"
                                <telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" BackColor="#0099FF"  
                                    BorderColor="#3399FF" Height="100%" Width="100%"
                                    <telerik:RadSplitter ID="RadSplitter3" Runat="server" Height="100%"  
                                        <telerik:RadPane ID="RadPane5" Runat="server" Width="120px"
                                            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" BackColor="White"  
                                                Height="100%" MultiPageID="RadMultiPage1" Orientation="VerticalLeft"  
                                                SelectedIndex="2" Skin="Office2007"
                                                    <telerik:RadTab runat="server" PageViewID="RadPageView1" Text="Incident"
                                                    <telerik:RadTab runat="server" PageViewID="RadPageView2"  
                                                    <telerik:RadTab runat="server" Text="Rehabilitation" Selected="True"
                                                    <telerik:RadTab runat="server" Text="Costs"
                                        <telerik:RadSplitBar ID="RadSplitBar3" Runat="server" /> 
                                        <telerik:RadPane ID="RadPane6" runat="server"
                                            <telerik:RadMultiPage ID="RadMultiPage1" Runat="server" SelectedIndex="0"
                                                <telerik:RadPageView ID="RadPageView1" runat="server"
                                                <telerik:RadPageView ID="RadPageView2" runat="server"
                        <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" /> 
                        <telerik:RadPane ID="RadPane2" Runat="server" Height="100%" Scrolling="None"  
                            <telerik:RadSlidingZone ID="RadSlidingZone1" Runat="server" ClickToOpen="True"  
                                Height="100%" SlideDirection="Left" Width="22px"
                                <telerik:RadSlidingPane ID="RadSlidingPane3" Runat="server"  
                                    EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False"  
                                    EnableResize="False" Index="0" Scrolling="Y" Skin="" Title="Required Actions"  
                                    Width="250px" > 

    all i do to load in an ASCX control into the RadSlidingPane3 is to use the loadcontrol command

  3. DevCraft R3 2016 release webinar banner
  4. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 25 May 2009 Link to this post

    Hello Jordan,

    We are aware of this problem and it is already fiexd - the fix will be available in the next release of RadControls which is scheduled for this week. The problem is caused by the SlideDirection=Left setting For the time being, you can use the following workaround - just place the below script block on the page, holding the RadSplitter:

    <script type="text/javascript">     
            Telerik.Web.UI.RadSlidingPane.prototype._setSlidingContainerSize = function(width, height)     
                var zone = this._zone;    
                var isVerticalSlideDirection = zone._isVerticalSlide();    
                var tabsContainer = zone.getTabsContainer();    
                var parentRelativeTo = ($telerik.isIE || !$telerik.getVisible(tabsContainer)) ? this.get_pane() : zone.getTabsContainer();    
                if (width == null)     
                    width = (!isVerticalSlideDirection) ? this.get_width() : parentRelativeTo.offsetWidth;    
                if (height == null)     
                    height = (isVerticalSlideDirection) ? this.get_height() : parentRelativeTo.offsetHeight;    
                var contentElement = this._contentElement;    
                if ($telerik.isSafari)     
           = width + "px";    
           = height + "px";    
                var popupElement = this._popupElement;    
                if (parseInt( != width)     
           = width + "px";    
                if (parseInt( != height)     
           = height + "px";    
                var resizeElement = this._resizeElement;    
                var enableResize = this.get_enableResize();    
                var contentHeight = height;    
                if (enableResize && isVerticalSlideDirection)     
                    contentHeight -= (resizeElement.offsetHeight);    
                var titleContainerParent = $telerik.getElementByClassName(this._tableElement, 'rspSlideHeader''tr');    
                if (titleContainerParent)     
                    var titleContainer;    
                    var tds = titleContainerParent.getElementsByTagName("td");    
                    for(var i=0, length=tds.length; i<length; i++)    
                        var td = tds[i];    
                        if(td.className != "rspSlideContainerResize")    
                            titleContainer = td;    
                    if (titleContainer)     
                        contentHeight -= titleContainer.offsetHeight;    
                var borderBox = $telerik.getBorderBox(contentElement);    
                var paddingBox = $telerik.getPaddingBox(contentElement);    
                var marginBox = $telerik.getMarginBox(contentElement);    
                contentHeight -= (borderBox.vertical + paddingBox.vertical + marginBox.vertical);    
                if (parseInt( != contentHeight && contentHeight >= 0)     
           = contentHeight + "px";    
                var contentWidth = width;    
                if (enableResize && ($telerik.getCurrentStyle(resizeElement, 'display''') != 'none') && !isVerticalSlideDirection)     
                    var resizeElementWidth = resizeElement.offsetWidth;    
                    if ($telerik.isIE6)     
                        resizeElementWidth = resizeElement.firstChild.offsetWidth;    
                        resizeElementWidth += $telerik.getBorderBox(resizeElement).horizontal;    
                    contentWidth -= resizeElementWidth;    
                contentWidth -= (borderBox.horizontal + paddingBox.horizontal + marginBox.horizontal);    
                if (parseInt( != contentWidth && contentWidth >= 0)     
           = contentWidth + "px";    
                this._isInitialSizeApplied = true;    

    When I tested this in the test demo which I build from your code, it fixed the problem - please examine the attached demo.

    Best wishes,

    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top