Controls overlapping in Splitter - Problem occurs in IE6 & IE7

4 posts, 1 answers
  1. Rajasekar Nammalvar
    Rajasekar Nammalvar avatar
    16 posts
    Member since:
    Aug 2009

    Posted 24 Sep 2009 Link to this post

    Hi

    I am using the map cotrols inside the splitter control. The splitter functionality works fine in Google chrome, Mozilla browser. But in IE6 & IE7 the map, panel controls are overlapping in splitter control.

    In my project I have leftPane, topPane and bottomPane. In topPane the map control placed and in the bottomPane grid has placed. While executing the application the map control overlaying on the grid (looks transparent). 

    Version: RadControls_for_ASP.NET_AJAX_2009_2_826_dev

    Sample code:

    Actually the map object has overlayyed on the bottompane. The map object will not work in your testing environment, so I have commented that line in the following source. Instead of that I have use the panel for testing.

    <div> 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager> 
        <telerik:RadSplitter id="radSplitterMain" runat="server" height="481" width="976" VisibleDuringInit="false" ResizeMode="EndPane">  
            <telerik:RadPane id="leftPane" runat="server" Width="20%" MaxWidth="250" > 
                    <!-- Left Pane Content -->                  
            </telerik:RadPane> 
            <telerik:RadSplitBar id="radSplitbarVertical" runat="server" CollapseMode="Forward" BorderStyle="Double" /> 
            <telerik:RadPane id="rightPane" runat="server" scrolling="none" width="80%">   
            <!-- Nested Horizontal splitter --> 
                <telerik:RadSplitter id="radSplitterRight" runat="server" liveresize="true" orientation="Horizontal">  
                    <telerik:RadPane id="topPane" runat="server" height="70%" scrolling="both">   
                    <!-- Top Pane Content --> 
                    <div id="divMap" style="width: 900px; height: 400px; top: 0px; left: 0px; z-index: 105; overflow: hidden; background-color: Yellow;">    
                    <!-- <esri:Map ID="Map1" runat="server" MapResourceManager="MapResourceManager1" Height="100%" Width="100%" BackColor="#FFFFDC" OnExtentChanged="Map1_ExtentChanged1"></esri:Map> -->                      
                            <asp:Panel ID="pnlResize" runat="server" EnableViewState="False" Height="20px" Width="20px" 
                        Style="left: 941px;  top: 422px; position: absolute; background-color: Red; overflow: hidden">    
                        </asp:Panel>         
                    </div> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar id="radSplitbarHorizontal" runat="server" CollapseMode="Backward" /> 
                    <telerik:RadPane id="bottomPane" runat="server" height="30%" MaxHeight="300" scrolling="both">  
                    <!-- Bottom Pane Content --> 
                        <asp:Panel ID="Panel1" runat="server" EnableViewState="False" Height="100%" Width="100%" BackColor="Brown">    
                        </asp:Panel>         
                        <!-- <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="OpenAccessDataSource2" /> --> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </div> 

    Regards,
    RAJASEKAR N
  3. Rajasekar Nammalvar
    Rajasekar Nammalvar avatar
    16 posts
    Member since:
    Aug 2009

    Posted 24 Sep 2009 Link to this post

    In IE8 working fine, only when we execute from Visual Studio. But when we deploy it, Configure in IIS and execute in IE8 that gives the same problem. I can't able to put the snapshot of my screen issue. Anyway please let me give some solution for this issue.

    Thanks in advance.

    Regards,
    RAJASEKAR N
  5. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 24 Sep 2009 Link to this post

    Hello RAJASEKAR N,
    The problem is a result of the position that you have applied to the Panel (map). As the RadPane that displays scrollbars does not have position, the elements with position inside it are displayed relative to the browser window (HTML or BODY element). In order to be able to scroll a positioned element with the rest of the content in the RadPane, you should apply position to it as well:

    <style type="text/css"> 
    .ApplyPosition 
    { 
        position:relative; 
    } 
    </style> 

    <telerik:RadPane ID="topPane" runat="server" Height="70%" Scrolling="both"  
        CssClass="ApplyPosition"> 

    Regards,
    Tsvetie
    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.
  7. Rajasekar Nammalvar
    Rajasekar Nammalvar avatar
    16 posts
    Member since:
    Aug 2009

    Posted 25 Sep 2009 Link to this post

    Dear Tsvetie,

    Great work. It's working fine for me. Many thanks.

    Regards,
    RAJASEKAR .N
Back to Top