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?
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 Answers, 1 is accepted
0
Rhyss
Top achievements
Rank 1
Rank 1
answered on 21 May 2009, 02:54 AM
This is my structure:
all i do to load in an ASCX control into the RadSlidingPane3 is to use the loadcontrol command
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| height: 100%; |
| margin: 0px; |
| padding: 0px; |
| overflow: hidden; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div style="height:100%"> |
| <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> |
| </telerik:RadScriptManager> |
| <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%" |
| Width="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"> |
| <Tabs> |
| <telerik:RadTab runat="server" PageViewID="RadPageView1" Text="Incident"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" PageViewID="RadPageView2" |
| Text="Correction"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Rehabilitation" Selected="True"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Costs"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| </telerik:RadPane> |
| <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> |
| <telerik:RadPageView ID="RadPageView2" runat="server"> |
| </telerik:RadPageView> |
| </telerik:RadMultiPage> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadAjaxPanel> |
| </div> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" /> |
| <telerik:RadPane ID="RadPane2" Runat="server" Height="100%" Scrolling="None" |
| Width="30px"> |
| <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" > |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| </form> |
| </body> |
all i do to load in an ASCX control into the RadSlidingPane3 is to use the loadcontrol command
0
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) |
| { |
| contentElement.style.width = width + "px"; |
| contentElement.style.height = height + "px"; |
| } |
| var popupElement = this._popupElement; |
| if (parseInt(popupElement.style.width) != width) |
| popupElement.style.width = width + "px"; |
| if (parseInt(popupElement.style.height) != height) |
| popupElement.style.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; |
| break; |
| } |
| } |
| 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(contentElement.style.height) != contentHeight && contentHeight >= 0) |
| contentElement.style.height = 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(contentElement.style.width) != contentWidth && contentWidth >= 0) |
| contentElement.style.width = contentWidth + "px"; |
| this._isInitialSizeApplied = true; |
| }; |
| </script> |
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.