This is a migrated thread and some comments may be shown as answers.

Controls overlapping in Splitter - Problem occurs in IE6 & IE7

3 Answers 114 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Rajasekar Nammalvar
Top achievements
Rank 1
Rajasekar Nammalvar asked on 24 Sep 2009, 01:38 PM

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 Answers, 1 is accepted

Sort by
0
Rajasekar Nammalvar
Top achievements
Rank 1
answered on 24 Sep 2009, 02:00 PM
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
0
Accepted
Tsvetie
Telerik team
answered on 24 Sep 2009, 04:34 PM
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.
0
Rajasekar Nammalvar
Top achievements
Rank 1
answered on 25 Sep 2009, 05:09 AM
Dear Tsvetie,

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

Regards,
RAJASEKAR .N
Tags
Splitter
Asked by
Rajasekar Nammalvar
Top achievements
Rank 1
Answers by
Rajasekar Nammalvar
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or