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

IE display issues

2 Answers 116 Views

Splitter

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

3tx9340 asked on 16 Sep 2009, 07:06 PM

I am working on an application that uses the splitter and the controls in the main content pane are displaying oddly in all versions of IE. They are not spanning the width and height of the pane and are not aligning correctly. I also have some pages that will not display at all and some that will run in compatibility mode in ie8. Everything shows correctly in firefox though. The app is using a master page and the pane with issues is the ID="rightPane"

    
            <%@ Master Language="C#" AutoEventWireup="True" Inherits="iTaskerWebApplication.MasterPages.DivBase" Codebehind="DivBase.master.cs" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <%@ Register src="../Common/vnv_SidebarMenu.ascx" tagname="SidebarMenu" tagprefix="uc1" %> 
        
            <%@ Register Namespace="iTaskerWebApplication" TagPrefix="iTasker" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
        
            <html style="height:100%"> 
        
            <head id="Head1" runat="server"> 
        
                <title>iTasker Labor Force Optimization</title> 
        
                <telerik:RadStyleSheetManager runat="server" ID="RadStyleSheet1" /> 
        
                <link href="../StyleSheet/styles.css" rel="stylesheet" type="text/css" /> 
        
            </head> 
        
            <body style="margin:0px;height:100%;overflow:hidden;" scroll="no"> 
        
                <form id="form1" runat="server" style="height:100%;margin:0px"> 
        
                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
        
                        <script type="text/javascript" language="javascript"> 
        
                            function SendMessage(sender, args) { 
        
                                var wnd = window.radopen("/Forms/Feedback.aspx?addr=" + window.location, null); 
        
                                //Get the clicked row 
        
                                var index = args.get_itemIndexHierarchical(); 
        
                                var item = args.get_tableView().get_dataItems()[index]; 
        
                                var rowElement = item.get_element(); 
        
                                //Get coordinates of the row and reposition the window relative to it 
        
                                var bounds = $telerik.getBounds(rowElement); 
        
                                wnd.moveTo(bounds.x + 120 + index * 10, bounds.y - 180); 
        
                            } 
        
                            function OnClientLoaded(sender, args)   
        
            {          
        
                sender.get_element().style.visibility = 'inherit';   
        
            }   
        
                        </script> 
        
                    </telerik:RadScriptBlock> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                        <Scripts> 
        
                            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                        </Scripts> 
        
                    </telerik:RadScriptManager>  
        
                    <div style="height:100%;"> 
        
                         <telerik:radformdecorator id="FormDecorator1" Skin="Office2007" runat="server" DecoratedControls="all"></telerik:radformdecorator>   
        
                        <telerik:RadSplitter runat="Server" ID="RadSplitter1" Width="100%" BorderSize="0" 
        
                            BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal" 
        
                            VisibleDuringInit="false" OnClientLoaded="OnClientLoaded"> 
        
                            <telerik:RadPane ID="topPane" runat="server" Height="90px"> 
        
                                <div class="header"> 
        
                                    <div class="logo"> 
        
                                        <asp:HyperLink ID="hlLogo" runat="server"><asp:Image ID="imgLogo" runat="server" BorderWidth="0" /></asp:HyperLink> 
        
                                    </div> 
        
                                        <asp:Panel ID="pnlOwner" runat="server" /> 
        
                                        <div id="langSelect"> 
        
                                            <telerik:RadMenu ID="menuLanguages" runat="server"  
        
                                                CausesValidation="False" onitemclick="menuLanguages_ItemClick"> 
        
                                                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                                                <Items> 
        
                                                    <telerik:RadMenuItem runat="server" BackColor="White"> 
        
                                                        <Items> 
        
                                                            <telerik:RadMenuItem runat="server" Text="English" Value="English" /> 
        
                                                            <telerik:RadMenuItem runat="server" Text="Español" Value="Spanish" /> 
        
                                                            <telerik:RadMenuItem runat="server" Text="العربية" Value="Arabic" /> 
        
                                                        </Items> 
        
                                                    </telerik:RadMenuItem> 
        
                                                </Items> 
        
                                            </telerik:RadMenu> 
        
                                            &nbsp;<asp:ImageButton runat="server" ID="ibtnHelp" onclick="ibtnHelp_Click" Visible="false" CausesValidation="false" /> 
        
                                        </div> 
        
                                        <div class="skin-chooser"> 
        
                                            <!--<label for="ctl00_RadMenu1_i3_SkinChooser_Input" class="skinLabel">Skin:</label>--> 
        
                                            <telerik:RadSkinManager runat="server" ID="RadSkinManager1" ShowChooser="false" Skin="Office2007" 
        
                                                PersistenceKey="Skin" PersistenceMode="Session" /> 
        
                                        </div> 
        
                                        <div class="logout"><asp:LinkButton ID="btnLogout" runat="server" CausesValidation="false" onclick="btnLogout_Click">Logout</asp:LinkButton></div> 
        
                                    <div id="userName"> 
        
                                           <asp:Label ID="lblTitle" runat="server"></asp:Label> 
        
                                        </div> 
        
                                    </div> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false" runat="server" /> 
        
                            <telerik:RadPane runat="server" ID="contentPane" Scrolling="none"> 
        
                                <telerik:RadSplitter runat="server" ID="RadSplitter2" BorderStyle="None" PanesBorderSize="0"> 
        
                                    <telerik:RadPane runat="Server" ID="leftPane" Width="175px" MinWidth="160" MaxWidth="190" Scrolling="None"> 
        
                                        <telerik:RadSplitter runat="server" ID="RadSplitter3" BorderStyle="None" PanesBorderSize="0" 
        
                                            Height="100%" Orientation="Horizontal"> 
        
                                            <telerik:RadPane runat="server"  Height="180px" ID="topLeftPane"> 
        
                                                <asp:Label ID="lblUserType" runat="server"></asp:Label> 
        
                                                <asp:ContentPlaceHolder ID="MenuContent" runat="server"> 
        
                                                    <uc1:SidebarMenu ID="SidebarMenu1" runat="server" /> 
        
                                                </asp:ContentPlaceHolder> 
        
                                            </telerik:RadPane> 
        
                                        </telerik:RadSplitter> 
        
                                    </telerik:RadPane> 
        
                                    <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward" /> 
        
                                    <telerik:RadPane runat="Server" ID="RightPane" CssClass="right-pane" halign="left"> 
        
                                        <asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server"> 
        
                                        </asp:ContentPlaceHolder> 
        
                                    </telerik:RadPane> 
        
                                </telerik:RadSplitter> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadSplitBar4" CollapseMode="Backward"  EnableResize="false" runat="server" /> 
        
                            <telerik:RadPane ID="footerPane" Height="45px" runat="server"> 
        
                                 <div id="footer"> 
        
                                     <div class="appVersion"><asp:Label runat="server" ID="lblVersion" /></div> 
        
                                     <div class="compName"><asp:Label runat="server" ID="lblCorporate" /></div> 
        
                                     <div class="feedBack"><asp:Image onClick="SendMessage()" runat="server" ID="imgFeedback" BorderWidth="1" /></div> 
        
                                     <a href="http://www.itasker.com/" target="_blank"><div class="powered"></div></a> 
        
                                </div> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    <telerik:RadWindowManager ID="Feedback" Width="700" Height="500" 
        
                        VisibleStatusbar="false" runat="server"  
        
                        Behavior="Close,Move" > 
        
                    </telerik:RadWindowManager> 
        
                    </div> 
        
                    <script type="text/javascript"> 
        
                        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
        
                        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
        
                    </script> 
        
                    <script type="text/javascript"> 
        
                        try { 
        
                            var pageTracker = _gat._getTracker("UA-169640-23"); 
        
                            pageTracker._trackPageview(); 
        
                        } catch (err) { } 
        
                    </script> 
        
                </form> 
        
            </body> 
        
            </html>

an example of a problem page is: where the content is not spanning the full width and adding extra margin or padding on the top and bottom of the element.

    
            <%@ Page Language="C#" MasterPageFile="~/MasterPages/DivBase.master" AutoEventWireup="true" Inherits="iTaskerWebApplication.Forms_Employees_EmployeesSearch" Title="<%$Resources:GlobalResource,EmployeesSearch%>" Codebehind="EmployeesSearch.aspx.cs" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <%@ Import Namespace="Resources"%> 
        
            <%@ Register Src="EmployeeDetails.ascx" TagName="EmployeeDetails" TagPrefix="uc1" %> 
        
            <asp:Content ID="content" ContentPlaceHolderID="contentPlaceHolder" runat="Server"> 
        
                <telerik:RadAjaxManagerProxy ID="RadAjaxManager" runat="server"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadToolTipManager"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadToolTipManager"  
        
                                        LoadingPanelID="ajaxLoadingPanel" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                            <telerik:AjaxSetting AjaxControlID="rgEmployees"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="rgEmployees"  
        
                                        LoadingPanelID="RadAjaxLoadingPanel" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManagerProxy> 
        
            <telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Transparency="30" InitialDelayTime="10"> 
        
                <img id="Image1" alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border: 0px; margin-top: 200px" /> 
        
            </telerik:RadAjaxLoadingPanel> 
        
            <telerik:RadToolTipManager  ID="RadToolTipManager" OffsetY="-1" HideEvent="ManualClose" 
        
                        Width="350" Height="250" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element" 
        
                        Position="MiddleRight" Animation="Fade"> 
        
                    </telerik:RadToolTipManager> 
        
            <fieldset> 
        
            <legend><asp:Label ID="lblCorporateTree" runat="server" /><%=Resources.GlobalResource.EmployeesSearch%></legend> 
        
            <div style="height: 100%; width: 100%;"> 
        
            <table cellspacing="0" cellpadding="0" border="0"> 
        
                <tr> 
        
                    <td align="<%=Resources.GlobalResource.PageAlign%>"> 
        
                        <asp:Button ID="btnAddEmployees" runat="server" Text="<%$Resources:GlobalResource,AddEmployees%>" onclick="btnAddEmployees_Click" /> 
        
                    </td> 
        
                    <td align="<%=Resources.GlobalResource.PageAlign%>"> 
        
                        <asp:Button ID="btnBack" runat="server" Text="<%$Resources:GlobalResource,Back%>" onclick="btnBack_Click" /> 
        
                    </td> 
        
                </tr> 
        
            </table> 
        
            <telerik:RadGrid ID="rgEmployees" AutoGenerateColumns="False"  
        
                                        runat="server" GridLines="None" ShowStatusBar="True" EnableLinqExpressions="False" 
        
                                        Width="100%" AllowFilteringByColumn="True"   
        
                                        AllowPaging="True" AllowSorting="True"  
        
                    onneeddatasource="rgEmployees_NeedDataSource" ShowGroupPanel="True"  
        
                    PageSize="20" ondeletecommand="rgEmployees_DeleteCommand"  
        
                    onitemdatabound="rgEmployees_ItemDataBound"  
        
                    onitemdeleted="rgEmployees_ItemDeleted" onitemcommand="rgEmployees_ItemCommand"  
        
                    oneditcommand="rgEmployees_EditCommand" > 
        
                                        <PagerStyle Position="TopAndBottom" /> 
        
                                        <MasterTableView DataKeyNames="EmployeeID" Width="100%"> 
        
                                            <Columns> 
        
                                                <telerik:GridButtonColumn CommandName="Edit" Text="Edit"  
        
                                                    UniqueName="Edit"> 
        
                                                </telerik:GridButtonColumn> 
        
                                                <telerik:GridButtonColumn CommandName="Delete" Text="Delete"  
        
                                                    UniqueName="Delete"> 
        
                                                </telerik:GridButtonColumn> 
        
                                                <telerik:GridButtonColumn CommandName="UnDelete" Text="UnDelete"  
        
                                                    UniqueName="UnDelete"> 
        
                                                </telerik:GridButtonColumn>   
        
                                <telerik:GridTemplateColumn AllowFiltering="false" Groupable="false" HeaderText="Information" ItemStyle-HorizontalAlign="Center"> 
        
                                                <ItemTemplate> 
        
                                                    <asp:HyperLink ID="targetControl" runat="server" NavigateUrl="#" > 
        
                                                        <asp:Image ID="imgInfo" runat="server" ImageUrl="~/Images/cmn/MsgInfo.gif" Width="22px" /></asp:HyperLink> 
        
                                                </ItemTemplate> 
        
                                            </telerik:GridTemplateColumn> 
        
                                    <telerik:GridBoundColumn AllowFiltering="false" CurrentFilterFunction="NoFilter" DataField="EmployeeID" Display="true" 
        
                                    DataType="System.Int32" FilterListOptions="VaryByDataType" ForceExtractValue="None" 
        
                                    HeaderText="Employee ID" ReadOnly="True" SortExpression="EmployeeID" UniqueName="EmployeeID"> 
        
                                    </telerik:GridBoundColumn> 
        
                                                <telerik:GridBoundColumn UniqueName="EmployeeNum" AllowFiltering="true" DataField="EmployeeNum"  
        
                                                    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"  
        
                                                    HeaderText="<%$Resources:GlobalResource,Number%>"> 
        
                                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" /> 
        
                                                </telerik:GridBoundColumn> 
        
                                                <telerik:GridBoundColumn AllowFiltering="true" DataField="FirstName"  
        
                                                    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"  
        
                                                    HeaderText="<%$Resources:GlobalResource,FirstName%>"> 
        
                                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" /> 
        
                                                </telerik:GridBoundColumn> 
        
                                                <telerik:GridBoundColumn AllowFiltering="true" DataField="LastName"  
        
                                                    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"  
        
                                                    HeaderText="<%$Resources:GlobalResource,LastName%>"> 
        
                                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" /> 
        
                                                </telerik:GridBoundColumn> 
        
                                                <telerik:GridBoundColumn AllowFiltering="false" DataField="CorporateName"  
        
                                                    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"  
        
                                                    HeaderText="<%$Resources:GlobalResource,CompanyName%>"> 
        
                                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" /> 
        
                                                </telerik:GridBoundColumn> 
        
                                                <telerik:GridBoundColumn AllowFiltering="false" DataField="SiteName"  
        
                                                    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"  
        
                                                    HeaderText="<%$Resources:GlobalResource,SiteName%>"> 
        
                                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" /> 
        
                                                </telerik:GridBoundColumn> 
        
                                                <telerik:GridBoundColumn AllowFiltering="true" DataField="DepartmentName"  
        
                                                    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"  
        
                                                    HeaderText="<%$Resources:GlobalResource,DepartmentName%>"> 
        
                                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" /> 
        
                                                </telerik:GridBoundColumn> 
        
                                                <telerik:GridBoundColumn Visible="false" AllowFiltering="false" DataField="IsDeleted"  
        
                                                    HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"  
        
                                                    HeaderText="<%$Resources:GlobalResource,DepartmentName%>"> 
        
                                                    <HeaderStyle Font-Bold="True" HorizontalAlign="Center" /> 
        
                                                </telerik:GridBoundColumn> 
        
                                            </Columns> 
        
                                            <EditFormSettings> 
        
                                                <EditColumn UniqueName="EditCommandColumn1"> 
        
                                                </EditColumn> 
        
                                            </EditFormSettings> 
        
                                        </MasterTableView> 
        
                                        <ExportSettings IgnorePaging="true" OpenInNewWindow="true" ExportOnlyData="false"> 
        
                                            <Excel Format="Html" FileExtension=".xls" /> 
        
                                        </ExportSettings> 
        
                                        <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True"  
        
                                            AllowDragToGroup="True"> 
        
                                        </ClientSettings> 
        
                                    </telerik:RadGrid> 
        
                                    </div> 
        
                         </fieldset> 
        
            </asp:Content>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

IE display issues

2 Answers, 1 is accepted