[CLOSED] [1.0] Panel AutoHeight Issue

  1. #1

    [CLOSED] [1.0] Panel AutoHeight Issue



    The following code snippet renders fine in IE8 standards mode, but doesn't render in IE8 Compatibility mode, which our internal users use. When the "show" button is clicked the content is updated and the panel is shown but there are some layout issues. Any ideas?


    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    
    <script runat="server">
    
    
        protected void btnShow_Click(object sender, DirectEventArgs e)
        {
            Panel1.Html = "line 1<br />line 2<br />line 3<br />";
            Panel2.Html = "hello<br />world<br />test<br />";
            pnlReadOnlyFields.Show();
            FormPanel1.Show();
        }
    
    
    </script>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:Button runat="server" Text="Show">
                <DirectEvents>
                    <Click OnEvent="btnShow_Click" />
                </DirectEvents>
            </ext:Button>
            <ext:FormPanel ID="FormPanel1" runat="server"
                HideParent="true"
                HideMode="Offsets"
                Hidden="true"
                LabelSeparator="&amp;nbsp;"
                ForceLayout="true" 
                Frame="true"
                LabelWidth="100">
                <Items>
                    <ext:FieldSet runat="server"
                        Title="Test"
                        StyleSpec="margin:15px"
                        HideMode="Offsets"
                        ForceLayout="true" 
                        LabelSeparator="&amp;nbsp;"
                        Collapsible="true"
                        Layout="Form">
                        <Items>       
                            <ext:Panel ID="pnlReadOnlyFields" runat="server" ForceLayout="true" Hidden="true" HideMode="Offsets">
                                <Items>
                                    <ext:Panel ID="Panel1" runat="server" FieldLabel="Label1"  />
                                    <ext:Panel ID="Panel2" runat="server" FieldLabel="Label2" />
                                </Items>
    <%--                            <Listeners>
                                    <Show Handler="(function() { #{FormPanel1}.syncSize(); #{FormPanel1}.doLayout(); }.defer(200, this)); " />
                                </Listeners>--%>
                            </ext:Panel>
                        </Items>
                    </ext:FieldSet>
                </Items>
            </ext:FormPanel>
        </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] [1.0] Panel AutoHeight Issue



    Hi,

    This is a more simplified version of the code that demonstrates the problem:


    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    
    <script runat="server">
    
    
        protected void btnUpdate_Click(object sender, DirectEventArgs e)
        {
            Panel1.Html = "line 1<br />line 2<br />line 3<br />";
            Panel2.Html = "hello<br />world<br />test<br />";
        }
    
    
    </script>
    
    
    <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:FieldSet runat="server"
                Title="Test"
                StyleSpec="margin:15px"
                HideMode="Offsets"
                ForceLayout="true" 
                LabelSeparator="&amp;nbsp;"
                Collapsible="true"
                Frame="true"
                ButtonAlign="Left"
                Layout="Form">
                <Items>       
                    <ext:Panel ID="pnlReadOnlyFields" runat="server" ForceLayout="true" HideMode="Offsets">
                        <Items>
                            <ext:Panel ID="Panel1" runat="server" FieldLabel="Panel1" Html="Default Text" />
                            <ext:Panel ID="Panel2" runat="server" FieldLabel="Panel2" Html="Default Text" />
                        </Items>
                    </ext:Panel>
                </Items>
                <Buttons>
                    <ext:Button ID="Button1" runat="server" Text="Update Text">
                        <DirectEvents>
                            <Click OnEvent="btnUpdate_Click" />
                        </DirectEvents>
                    </ext:Button>
                </Buttons>
            </ext:FieldSet>
        </form>
    </body>
    </html>
    What I basically want to is get the dynamic html text to render correctly in IE8 Compatibility View. (To turn on Compatibility view in IE8 click the "page break" icon next to the web address.).

    Thanks
  3. #3

    RE: [CLOSED] [1.0] Panel AutoHeight Issue

    Hi,

    The problem related with FieldLabeler. IE6/7 cannot determine parent height using children size if children have position:absolute

    It is IE6/7 bug. Therefore you have to call SyncSize for children after actions which change the size

    protected void btnUpdate_Click(object sender, DirectEventArgs e)
    {
        Panel1.Html = "line 1<br />line 2<br />line 3<br />";
        Panel2.Html = "hello<br />world<br />test<br />";
        Panel1.SyncSize();
        Panel2.SyncSize();
    }
    Please update from SVN first

    P.S. Please note that we doesn't support IE8 compatibility mode because we don't distinguish IE7 and IE8 compatibility mode but IE8 compatibility mode doesn't always correctly emulate IE7 (there are cases when IE7 renders fine but IE8 compatibility mode is not). Just your current issue is reproduced under IE7

Similar Threads

  1. [CLOSED] FormPanel autoheight issue
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 15, 2012, 9:34 AM
  2. [CLOSED] Portal issue with autoheight
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 04, 2011, 2:27 PM
  3. [CLOSED] [1.0] AutoHeight Panel
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 09, 2011, 3:32 PM
  4. [CLOSED] panel autoheight
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 18, 2009, 2:07 PM
  5. [CLOSED] Panel.AutoHeight issue
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 31, 2009, 10:55 AM

Posting Permissions