issues with radsplitter/radpane and form decorator

5 posts, 0 answers
  1. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 09 Nov 2009 Link to this post


    <%@ 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
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 12 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 16 Nov 2009 Link to this post

    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.
  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 20 Nov 2009 Link to this post

    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.
  6. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 15 Dec 2009 Link to this post

    Thanks a lot, this worked for me.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017