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

issues with radsplitter/radpane and form decorator

4 Answers 121 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
mzn developer
Top achievements
Rank 1
mzn developer asked on 10 Nov 2009, 12:40 AM

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadFormDecoratorTestApp._Default" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
html, body, form   
{   
    height: 100%;   
    margin: 0px;   
    padding: 0px;   
    overflow: hidden;   
}   
 
body { 
    background-color: #F2ECCA; 
    font-family: Tahoma, Verdana, Arial, Sans-Serif; 
    font-size: 14px; 
} 
 
#headpart { 
    background-color: ivory; 
} 
 
#rightcontent { 
    margin-left:0px; 
    margin-right:0px; 
    margin-bottom:5px; 
    margin-top:0px; 
} 
     
#bodypart { 
    padding: 10px; 
} 
 
#rightcontent p { 
    font-size:10px; 
    margin-left:0px; 
} 
 
.ApplyPosition   
{   
    position: relative; 
} 
    </style> 
</head> 
<body onload="setFilterMultiPageHeight();registerScroll();"> 
    <form id="form1" runat="server"> 
        <script type="text/javascript"> 
                        
            function registerScroll(){ 
                getCurrentScrollDiv().onscroll = saveScrollPos; 
            } 
             
            function getCurrentScrollDiv(){ 
                var mpEl = getMPDiv(); 
 
                var mp = $find("<%= RadMultiPage1.ClientID %>"); 
                var pv = mp.get_selectedPageView(); 
                
                var pvpvDiv = pv.get_element(); 
                 
                return pvDiv; 
            } 
             
            function getMPDiv(){ 
                var mp = $find("<%= RadMultiPage1.ClientID %>"); 
                return mp.get_element(); 
            } 
             
            function saveScrollPos(){ 
                document.getElementById("<%= hdnFilterScroll.ClientID %>").value = getCurrentScrollDiv().scrollTop; 
            } 
             
            function setScrollPos(){ 
                getCurrentScrollDiv().scrollTop = document.getElementById("<%= hdnFilterScroll.ClientID %>").value; 
            } 
 
            function resizeFilterPanel(sender, Args){ 
                if (Args.get_oldHeight() != sender.get_height()){ 
                    setFilterMultiPageHeight(); 
                    setScrollPos(); 
                } 
            } 
             
            function handleTabSelected(){ 
                setFilterMultiPageHeight(); 
                registerScroll(); 
            } 
             
            function setFilterMultiPageHeight(){ 
                var pane = $find("<%= RadPane1.ClientID %>"); 
                var fh = document.getElementById('FilterHeader'); 
 
                var panepaneHeight = pane.get_height() - fh.offsetHeight; 
                 
                document.getElementById("<%= hdnFilterHeight.ClientID %>").value = paneHeight; 
                getCurrentScrollDiv().style.height = paneHeight + 'px'; 
                 
                setScrollPos(); 
            }            
        </script> 
        <telerik:RadWindowManager ID="LocalRadWindowManager" runat="server"> 
        </telerik:RadWindowManager> 
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True"> 
        </telerik:RadScriptManager> 
        <telerik:RadSplitter ID="NestedSplitter" Width="100%" Height="100%" runat="server" Skin="Outlook" LiveResize="true" 
            OnClientResized="resizeFilterPanel"> 
            <telerik:RadPane ID="LeftPane" runat="server" MinWidth="150" Height="" Index="0" 
                Scrolling="None"> 
                <!-- Place the content of the pane here --> 
                <iframe id="contentFrame" name="contentFrame" height="100%" width="100%" frameborder="0" 
                    src="http://www.google.com" runat="server" /> 
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Backward" /> 
            <telerik:RadPane ID="RadPane1" CssClass="ApplyPosition" runat="server" Scrolling="None" 
                MinWidth="300" Width="300px"> 
                <!-- Place the content of the pane here --> 
                <asp:HiddenField ID="hdnFilterHeight" runat="server" Value="400" /> 
                    <asp:HiddenField ID="hdnFilterScroll" runat="server" Value="0" /> 
                <asp:Panel ID="rightcontent" runat="server"> 
                    <telerik:RadFormDecorator ID="RadFormDecorator1"  DecoratedControls="All" runat="server" Skin="Web20" /> 
                    <div id="FilterHeader"> 
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" 
                            SelectedIndex="0" Skin="Web20" > 
                            <Tabs> 
                                <telerik:RadTab runat="server" Text="Tab1" Selected="True"> 
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Tab2"> 
                                </telerik:RadTab> 
                            </Tabs> 
                        </telerik:RadTabStrip> 
                    </div> 
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" ScrollBars="Auto"> 
                        <telerik:RadPageView ID="RadPageView1" runat="server"> 
                            <asp:RadioButtonList ID="rbl1" runat="server"> 
                                <asp:ListItem Text="blah1"></asp:ListItem> 
                                <asp:ListItem Text="blah2"></asp:ListItem> 
                                <asp:ListItem Text="blah3"></asp:ListItem> 
                                <asp:ListItem Text="blah4"></asp:ListItem> 
                                <asp:ListItem Text="blah5"></asp:ListItem> 
                                <asp:ListItem Text="blah6"></asp:ListItem> 
                                <asp:ListItem Text="blah7"></asp:ListItem> 
                                <asp:ListItem Text="blah8"></asp:ListItem> 
                                <asp:ListItem Text="blah9"></asp:ListItem> 
                                <asp:ListItem Text="blah10"></asp:ListItem> 
                                <asp:ListItem Text="blah11"></asp:ListItem> 
                            </asp:RadioButtonList> 
                            <asp:RadioButtonList ID="RadioButtonList2" runat="server"> 
                                <asp:ListItem Text="blah1"></asp:ListItem> 
                                <asp:ListItem Text="blah2"></asp:ListItem> 
                                <asp:ListItem Text="blah3"></asp:ListItem> 
                                <asp:ListItem Text="blah4"></asp:ListItem> 
                                <asp:ListItem Text="blah5"></asp:ListItem> 
                                <asp:ListItem Text="blah6"></asp:ListItem> 
                                <asp:ListItem Text="blah7"></asp:ListItem> 
                                <asp:ListItem Text="blah8"></asp:ListItem> 
                                <asp:ListItem Text="blah9"></asp:ListItem> 
                                <asp:ListItem Text="blah10"></asp:ListItem> 
                                <asp:ListItem Text="blah11"></asp:ListItem> 
                            </asp:RadioButtonList> 
                            <asp:RadioButtonList ID="RadioButtonList1" runat="server"> 
                                <asp:ListItem Text="blah1"></asp:ListItem> 
                                <asp:ListItem Text="blah2"></asp:ListItem> 
                                <asp:ListItem Text="blah3"></asp:ListItem> 
                                <asp:ListItem Text="blah4"></asp:ListItem> 
                                <asp:ListItem Text="blah5"></asp:ListItem> 
                                <asp:ListItem Text="blah6"></asp:ListItem> 
                                <asp:ListItem Text="blah7"></asp:ListItem> 
                                <asp:ListItem Text="blah8"></asp:ListItem> 
                                <asp:ListItem Text="blah9"></asp:ListItem> 
                                <asp:ListItem Text="blah10"></asp:ListItem> 
                                <asp:ListItem Text="blah11"></asp:ListItem> 
                            </asp:RadioButtonList> 
                            <asp:RadioButtonList ID="RadioButtonList4" runat="server"> 
                                <asp:ListItem Text="blah1"></asp:ListItem> 
                                <asp:ListItem Text="blah2"></asp:ListItem> 
                                <asp:ListItem Text="blah3"></asp:ListItem> 
                                <asp:ListItem Text="blah4"></asp:ListItem> 
                                <asp:ListItem Text="blah5"></asp:ListItem> 
                                <asp:ListItem Text="blah6"></asp:ListItem> 
                                <asp:ListItem Text="blah7"></asp:ListItem> 
                                <asp:ListItem Text="blah8"></asp:ListItem> 
                                <asp:ListItem Text="blah9"></asp:ListItem> 
                                <asp:ListItem Text="blah10"></asp:ListItem> 
                                <asp:ListItem Text="blah11"></asp:ListItem> 
                            </asp:RadioButtonList> 
                            <asp:RadioButtonList ID="RadioButtonList3" runat="server"> 
                                <asp:ListItem Text="blah1"></asp:ListItem> 
                                <asp:ListItem Text="blah2"></asp:ListItem> 
                                <asp:ListItem Text="blah3"></asp:ListItem> 
                                <asp:ListItem Text="blah4"></asp:ListItem> 
                                <asp:ListItem Text="blah5"></asp:ListItem> 
                                <asp:ListItem Text="blah6"></asp:ListItem> 
                                <asp:ListItem Text="blah7"></asp:ListItem> 
                                <asp:ListItem Text="blah8"></asp:ListItem> 
                                <asp:ListItem Text="blah9"></asp:ListItem> 
                                <asp:ListItem Text="blah10"></asp:ListItem> 
                                <asp:ListItem Text="blah11"></asp:ListItem> 
                                <asp:ListItem Text="Click this one!"></asp:ListItem> 
                            </asp:RadioButtonList> 
                        </telerik:RadPageView> 
                        <telerik:RadPageView ID="RadPageView2" runat="server"> 
                            blah 
                        </telerik:RadPageView> 
                    </telerik:RadMultiPage> 
                </asp:Panel> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
    </form> 
</body> 
</html> 
 

This works great in IE, but if you try in firefox 3.5.4 and click the bottom radio button titled, "Click this one!", you will notice the pane gets all messed up, with the content scrolling out of view and not able to get it back.  If I remove the RadFormDecorator it works fine.  I am already having to do some funky javascript to get the scroll bars working, but it appears in conjunction with the RadFormDecorator it seems to be messing things up.

Thanks

4 Answers, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 12 Nov 2009, 12:19 PM
Hello mzn developer,

I ran your code with and without RadFormDecorator but I did not notice any change in the behavior. Please open a support ticket and send us a full, working sample project where the problem that you experience could be reproduced. We will check it and do our best to help.


Best wishes,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
mzn developer
Top achievements
Rank 1
answered on 16 Nov 2009, 08:15 PM
img3.gif
img1.gif
img2.gif
Is your right pane scrolling, in the pageview of the multipage?  It should be.  From there, are you clicking the bottom radiobutton after scrolling down all the way?

Thanks.

img1 - on page load
img2 - scrolled down to bottom of right pane
img3 - after clicking bottom radio button "Click this one!" whole pane gets shifted upward and unable to see top part.
0
Georgi Tunev
Telerik team
answered on 20 Nov 2009, 08:35 AM
Hi,

Thank you for the additional details - now I was able to reproduce the problem.
The reason for it is in the default browser's behavior - in order to style the radioboxes, we move the real ones outside of the viewport with position:absolute (we cannot hide them with display:none, because the browser will throw errors when you try to focus them). When you click on a decorated radiobutton, the browser detects it and tries to move the focused element in the viewport - that is why the page jumps up. To avoid that problem, you should set position:relative to the container element.
e.g.
#RadPageView1
{
    position:relative;   
}



Greetings,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
mzn developer
Top achievements
Rank 1
answered on 15 Dec 2009, 03:41 PM
Thanks a lot, this worked for me.
Tags
FormDecorator
Asked by
mzn developer
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
mzn developer
Top achievements
Rank 1
Share this question
or