[CLOSED] Browser compatibility issue with Layout

  1. #1

    [CLOSED] Browser compatibility issue with Layout

    Hi,

    I am getting the problem with the browsers IE 6.0,7.0 and Firefox 2.0.

    See the design
    <ext:Panel ID="Panel42" runat="server" Border="false" Width="320">
                                                <Body>
                                                    <ext:FormLayout ID="FormLayout6" runat="server">
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Panel Border="false" ID="Panel43" runat="server">
                                                                <Body>
                                                                    <ext:ColumnLayout ID="ColumnLayout14" runat="server" FitHeight="false">
                                                                        <ext:LayoutColumn ColumnWidth="0.60">
                                                                            <ext:Panel Border="false" ID="Panel45" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout26" runat="server">
                                                                                        <ext:DateField Cls="cntrlFont" ID="dfFrom" runat="server">
                                                                                        </ext:DateField>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn>
                                                                            <ext:Panel Border="false" ID="Panel1" runat="server" Width="3">
                                                                                <Body>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn ColumnWidth="0.40">
                                                                            <ext:Panel Border="false" ID="Panel46" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout27" runat="server">
                                                                                        <ext:Checkbox ID="chkReminder" BoxLabel="<%$Resources:Resource,Reminder6%>" runat="server">
                                                                                        </ext:Checkbox>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                    </ext:ColumnLayout>
                                                                </Body>
                                                            </ext:Panel>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Panel Border="false" ID="Panel156" runat="server" Height="1">
                                                                <Body>
                                                                </Body>
                                                            </ext:Panel>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Panel Border="false" ID="Panel47" runat="server">
                                                                <Body>
                                                                    <ext:ColumnLayout ID="ColumnLayout15" runat="server" FitHeight="false">
                                                                        <ext:LayoutColumn ColumnWidth="0.60">
                                                                            <ext:Panel Border="false" ID="Panel49" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout29" runat="server">
                                                                                        <ext:DateField Cls="cntrlFont" ID="dfUntil" runat="server">
                                                                                        </ext:DateField>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn>
                                                                            <ext:Panel Border="false" ID="Panel2" runat="server" Width="3">
                                                                                <Body>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn ColumnWidth="0.40">
                                                                            <ext:Panel Border="false" ID="Panel50" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout30" runat="server">
                                                                                        <ext:ComboBox Cls="cntrlFont" ID="cboRemindDuration" runat="server">
                                                                                        </ext:ComboBox>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                    </ext:ColumnLayout>
                                                                </Body>
                                                            </ext:Panel>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Panel Border="false" ID="Panel157" runat="server" Height="1">
                                                                <Body>
                                                                </Body>
                                                            </ext:Panel>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Panel Border="false" ID="Panel51" runat="server">
                                                                <Body>
                                                                    <ext:ColumnLayout ID="ColumnLayout16" runat="server" FitHeight="false">
                                                                        <ext:LayoutColumn ColumnWidth="0.60">
                                                                            <ext:Panel Border="false" ID="Panel53" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout32" runat="server">
                                                                                        <ext:TextField Cls="cntrlFont" ID="txtCreatedDate" runat="server" ReadOnly="true"
                                                                                            Width="150">
                                                                                        </ext:TextField>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn>
                                                                            <ext:Panel Border="false" ID="Panel3" runat="server" Width="3">
                                                                                <Body>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn ColumnWidth="0.40">
                                                                            <ext:Panel Border="false" ID="Panel54" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout33" runat="server">
                                                                                        <ext:TextField Cls="cntrlFont" ID="txtCreatedBy" runat="server" ReadOnly="true">
                                                                                        </ext:TextField>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                    </ext:ColumnLayout>
                                                                </Body>
                                                            </ext:Panel>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Panel Border="false" ID="Panel158" runat="server" Height="1">
                                                                <Body>
                                                                </Body>
                                                            </ext:Panel>
                                                        </ext:Anchor>
                                                        <ext:Anchor Horizontal="100%">
                                                            <ext:Panel Border="false" ID="Panel55" runat="server">
                                                                <Body>
                                                                    <ext:ColumnLayout ID="ColumnLayout17" runat="server" FitHeight="false">
                                                                        <ext:LayoutColumn ColumnWidth="0.60">
                                                                            <ext:Panel Border="false" ID="Panel57" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout35" runat="server">
                                                                                        <ext:TextField Cls="cntrlFont" ID="txtModifiedDate" runat="server" ReadOnly="true"
                                                                                            Width="150">
                                                                                        </ext:TextField>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn>
                                                                            <ext:Panel Border="false" ID="Panel4" runat="server" Width="3">
                                                                                <Body>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                        <ext:LayoutColumn ColumnWidth="0.40">
                                                                            <ext:Panel Border="false" ID="Panel58" runat="server">
                                                                                <Body>
                                                                                    <ext:FitLayout ID="FitLayout36" runat="server">
                                                                                        <ext:TextField Cls="cntrlFont" ID="txtModifiedBy" runat="server" ReadOnly="true">
                                                                                        </ext:TextField>
                                                                                    </ext:FitLayout>
                                                                                </Body>
                                                                            </ext:Panel>
                                                                        </ext:LayoutColumn>
                                                                    </ext:ColumnLayout>
                                                                </Body>
                                                            </ext:Panel>
                                                        </ext:Anchor>
                                                    </ext:FormLayout>
                                                </Body>
                                            </ext:Panel>
    And also see the screen shot.
  2. #2

    RE: [CLOSED] Browser compatibility issue with Layout

    Hi,

    For your sample gives different result then on your screenshot. It seems that you use additional css rules on page
    I removed your space panels (which have 3px width and 1px height ) and use css rules. The following example looks the same in all browsers (IE6, IE8, IE8 with comp.mode, FF3, Chrome) for me

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Test Page</title>
        
        <style type="text/css">
            .space{
                margin-right: 5px;
                margin-bottom: 1px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="SM1" runat="server">
        </ext:ScriptManager>
        
        <ext:Panel ID="Panel42" runat="server" Border="false" Width="320">
            <Body>
                <ext:FormLayout ID="FormLayout6" runat="server">
                    <ext:Anchor Horizontal="100%">
                        <ext:Panel Border="false" ID="Panel43" runat="server" Cls="space">
                            <Body>
                                <ext:ColumnLayout ID="ColumnLayout14" runat="server" FitHeight="false">
                                    <ext:LayoutColumn ColumnWidth="0.60">
                                        <ext:Panel Border="false" ID="Panel45" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout26" runat="server">
                                                    <ext:DateField Cls="cntrlFont" ID="dfFrom" runat="server">
                                                    </ext:DateField>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                    
                                    <ext:LayoutColumn ColumnWidth="0.40">
                                        <ext:Panel Border="false" ID="Panel46" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout27" runat="server">
                                                    <ext:Checkbox ID="chkReminder" BoxLabel="Reminder" runat="server">
                                                    </ext:Checkbox>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                </ext:ColumnLayout>
                            </Body>
                        </ext:Panel>
                    </ext:Anchor>
                    
                    <ext:Anchor Horizontal="100%">
                        <ext:Panel Border="false" ID="Panel47" runat="server" Cls="space">
                            <Body>
                                <ext:ColumnLayout ID="ColumnLayout15" runat="server" FitHeight="false">
                                    <ext:LayoutColumn ColumnWidth="0.60">
                                        <ext:Panel Border="false" ID="Panel49" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout29" runat="server">
                                                    <ext:DateField Cls="cntrlFont" ID="dfUntil" runat="server">
                                                    </ext:DateField>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                    
                                    <ext:LayoutColumn ColumnWidth="0.40">
                                        <ext:Panel Border="false" ID="Panel50" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout30" runat="server">
                                                    <ext:ComboBox Cls="cntrlFont" ID="cboRemindDuration" runat="server">
                                                    </ext:ComboBox>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                </ext:ColumnLayout>
                            </Body>
                        </ext:Panel>
                    </ext:Anchor>
                    
                    <ext:Anchor Horizontal="100%">
                        <ext:Panel Border="false" ID="Panel51" runat="server" Cls="space">
                            <Body>
                                <ext:ColumnLayout ID="ColumnLayout16" runat="server" FitHeight="false">
                                    <ext:LayoutColumn ColumnWidth="0.60">
                                        <ext:Panel Border="false" ID="Panel53" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout32" runat="server">
                                                    <ext:TextField Cls="cntrlFont" ID="txtCreatedDate" runat="server" ReadOnly="true"
                                                        Width="150">
                                                    </ext:TextField>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                    
                                    <ext:LayoutColumn ColumnWidth="0.40">
                                        <ext:Panel Border="false" ID="Panel54" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout33" runat="server">
                                                    <ext:TextField Cls="cntrlFont" ID="txtCreatedBy" runat="server" ReadOnly="true">
                                                    </ext:TextField>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                </ext:ColumnLayout>
                            </Body>
                        </ext:Panel>
                    </ext:Anchor>
                    
                    <ext:Anchor Horizontal="100%">
                        <ext:Panel Border="false" ID="Panel55" runat="server" Cls="space">
                            <Body>
                                <ext:ColumnLayout ID="ColumnLayout17" runat="server" FitHeight="false">
                                    <ext:LayoutColumn ColumnWidth="0.60">
                                        <ext:Panel Border="false" ID="Panel57" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout35" runat="server">
                                                    <ext:TextField Cls="cntrlFont" ID="txtModifiedDate" runat="server" ReadOnly="true"
                                                        Width="150">
                                                    </ext:TextField>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                   
                                    <ext:LayoutColumn ColumnWidth="0.40">
                                        <ext:Panel Border="false" ID="Panel58" runat="server">
                                            <Body>
                                                <ext:FitLayout ID="FitLayout36" runat="server">
                                                    <ext:TextField Cls="cntrlFont" ID="txtModifiedBy" runat="server" ReadOnly="true">
                                                    </ext:TextField>
                                                </ext:FitLayout>
                                            </Body>
                                        </ext:Panel>
                                    </ext:LayoutColumn>
                                </ext:ColumnLayout>
                            </Body>
                        </ext:Panel>
                    </ext:Anchor>
                </ext:FormLayout>
            </Body>
        </ext:Panel>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Browser Compatibility
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 28, 2012, 5:01 PM
  2. Replies: 1
    Last Post: May 31, 2012, 11:45 AM
  3. Table Layout Problem with IE Compatibility
    By tugrul in forum 1.x Help
    Replies: 2
    Last Post: May 02, 2011, 7:16 AM
  4. [0.8.2 ] compatibility issue with ie6.0
    By pierluigiM in forum 1.x Help
    Replies: 2
    Last Post: Nov 29, 2010, 1:41 PM
  5. [CLOSED] Browser compatibility issue with Layout
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 25, 2009, 11:43 AM

Posting Permissions