What's New?

[CLOSED] IE6 - layout - Stuff flying arround

Page 1 of 4 123 ... LastLast
  1. #1
    Feb 22, 2011, 5:04 PM

    [CLOSED] IE6 - layout - Stuff flying arround

    Hi,

    I am testing my site in IE, and I noticed that in ie6, the layout is broken.

    I am attaching a pic to show it.

    Bellow is a code to reproduce it.

    Thanks

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
        }
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager Locale="pt-BR" Theme="Gray" runat="server" />
        <ext:Viewport AutoScroll="true" Layout="Center" runat="server">
            <Items>
                <ext:Container Width="980" runat="server">
                    <Content>
                        <ext:CompositeField runat="server">
                            <Items>
                                <ext:DisplayField StyleSpec="font-size: 40px" Text="Test" runat="server" />
                                <ext:HyperLink NavigateUrl="~/View/" Text="Test" runat="server" />
                            </Items>
                        </ext:CompositeField>
                        <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
                            TrackMouseOver="true" Width="600" Height="100" AutoExpandColumn="company">
                            <Store>
                                <ext:Store ID="Store1" runat="server">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="company" />
                                                <ext:RecordField Name="price" Type="Float" />
                                                <ext:RecordField Name="change" Type="Float" />
                                                <ext:RecordField Name="pctChange" Type="Float" />
                                                <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                                    <ext:Column Header="Price" DataIndex="price">
                                    </ext:Column>
                                    <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                                    </ext:Column>
                                    <ext:Column Header="Change" DataIndex="pctChange">
                                    </ext:Column>
                                    <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel runat="server" SingleSelect="true" />
                            </SelectionModel>
                        </ext:GridPanel>
                        <ext:Container AutoHeight="true" runat="server">
                            <Items>
                                <ext:ColumnLayout runat="server" FitHeight="false" Split="true">
                                    <Columns>
                                        <ext:LayoutColumn ColumnWidth="1">
                                            <ext:Container runat="server">
                                                <Content>
                                                    1<br />
                                                    2<br />
                                                    3<br />
                                                    4<br />
                                                    5<br />
                                                    6<br />
                                                    7<br />
                                                    8<br />
                                                    9<br />
                                                    10<br />
                                                    11<br />
                                                    12<br />
                                                    13<br />
                                                    14<br />
                                                    15<br />
                                                    1<br />
                                                    2<br />
                                                    3<br />
                                                    4<br />
                                                    5<br />
                                                    6<br />
                                                    7<br />
                                                    8<br />
                                                    9<br />
                                                    10<br />
                                                    11<br />
                                                    12<br />
                                                    13<br />
                                                    14<br />
                                                    15<br />
                                                    1<br />
                                                    2<br />
                                                    3<br />
                                                    4<br />
                                                    5<br />
                                                    6<br />
                                                    7<br />
                                                    8<br />
                                                    9<br />
                                                    10<br />
                                                </Content>
                                            </ext:Container>
                                        </ext:LayoutColumn>
                                        <ext:LayoutColumn>
                                            <ext:Container Width="150" runat="server">
                                                <Content>
                                                    <ext:Panel runat="server" Title="FlyAway"><Content>Fly awayy</Content></ext:Panel>
                                                </Content>
                                            </ext:Container>
                                        </ext:LayoutColumn>
                                    </Columns>
                                </ext:ColumnLayout>
                            </Items>
                        </ext:Container>
                    </Content>
                </ext:Container>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: 1.jpg  Views: 87  Size: 30.7 KB  ID: 2342  
    Last edited by Daniil; Feb 24, 2011 at 2:29 PM. Reason: [CLOSED]
  2. #2
    Feb 22, 2011, 6:42 PM
    Hi,

    In according to the ExtJS docs Viewport doesn't support scrolling.
    http://dev.sencha.com/deploy/dev/doc...s=Ext.Viewport

    Please try to replace <est:Viewport> with <ext:Panel>.
  3. #3
    Feb 22, 2011, 7:17 PM
    Hi,

    I was able to reduce your code sample down to the following and still reproduce the scroll issue in IE6/7.

    We are investigating further.

    Example

    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:Viewport Layout="ColumnLayout" runat="server">
            <Items>
                <ext:Container runat="server" ColumnWidth="0.5" />
                <ext:Container runat="server" Width="980" AutoScroll="true">
                    <Items>
                        <ext:CompositeField runat="server">
                            <Items>
                                <ext:DisplayField Text="Test" runat="server" />
                            </Items>
                        </ext:CompositeField>
                        <ext:Container runat="server">
                            <Content>
                                <div style="height:1000px;width:185px;border:1px solid red;background-color:red;"></div>
                            </Content>
                        </ext:Container>
                    </Items>
                </ext:Container>
                <ext:Container runat="server" ColumnWidth="0.5" />
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Feb 22, 2011, 7:54 PM
    I discovered that it's related to CompositeField.

    If place just DisplayField instead of CompositeField, it appears to be working fine.
  5. #5
    Feb 23, 2011, 2:24 PM
    Please set StyleSpec="position:relative;" for the container with AutoScroll="true".
    <ext:Container 
    runat="server" 
    Width="980" 
    AutoScroll="true" 
    StyleSpec="position:relative;">
    Full example
    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
         
        <ext:Viewport runat="server" Layout="ColumnLayout">
            <Items>
                <ext:Container runat="server" ColumnWidth="0.5" />
                <ext:Container 
                    runat="server" 
                    Width="980" 
                    AutoScroll="true" 
                    StyleSpec="position:relative;">
                    <Items>
                        <ext:CompositeField runat="server">
                            <Items>
                                <ext:DisplayField Text="Test" runat="server" />
                            </Items>
                        </ext:CompositeField>
                        <ext:Container runat="server">
                            <Content>
                                <div style="height:1000px;width:185px;border:1px solid red;background-color:red;"></div>
                            </Content>
                        </ext:Container>
                    </Items>
                </ext:Container>
                <ext:Container runat="server" ColumnWidth="0.5" />
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
  6. #6
    Feb 23, 2011, 2:31 PM
    Here is the minimized example that you provide in the initial post.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
            this.Store1.DataBind();
        }
    }
 
    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
        }
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <div>
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="Center" >
            <Items>
                <ext:Container 
                    runat="server" 
                    Width="900"  
                    AutoScroll="true" 
                    StyleSpec="position: relative;">
                    <Items>
                        <ext:CompositeField runat="server">
                            <Items>
                                <ext:DisplayField runat="server" Text="Test" />
                            </Items>
                        </ext:CompositeField>
                        <ext:GridPanel 
                            ID="GridPanel1" 
                            runat="server" 
                            StripeRows="true" 
                            Title="Array Grid"
                            TrackMouseOver="true" 
                            Width="600" 
                            Height="100" 
                            AutoExpandColumn="company">
                            <Store>
                                <ext:Store ID="Store1" runat="server">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="company" />
                                                <ext:RecordField Name="price" Type="Float" />
                                                <ext:RecordField Name="change" Type="Float" />
                                                <ext:RecordField Name="pctChange" Type="Float" />
                                                <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                                    <ext:Column Header="Price" DataIndex="price">
                                    </ext:Column>
                                    <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                                    </ext:Column>
                                    <ext:Column Header="Change" DataIndex="pctChange">
                                    </ext:Column>
                                    <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel runat="server" SingleSelect="true" />
                            </SelectionModel>
                        </ext:GridPanel>
                        <ext:Container runat="server">
                            <Content>
                                <div style="height:1000px;width:185px;border:1px solid red;background-color:red;"></div>
                            </Content>
                        </ext:Container>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
  7. #7
    Feb 23, 2011, 3:21 PM
    Alright! Stuff is not flying anymore.

    But, like you said, viewport doesnt support autoscroll. If we move the autoscroll to the container, we will have an extra scrollbar, like in the pic attached.

    I tried replacing the ViewPort with the a Panel, but center layout doesnt work then. Please, try that. I am doing something wrong?

    I found this topic, but it didnt help: http://forums.ext.net/showthread.php...-centered-rows

    Thanks
    Attached Thumbnails Click image for larger version.  Name: 1.jpg  Views: 62  Size: 9.5 KB  ID: 2350  
  8. #8
    Feb 23, 2011, 3:47 PM
    Hmm, it looks like Center layout is broken.

    Here is a sample to reproduce. We are investigating.

    Center layout issue
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel 
        runat="server" 
        Width="500" 
        Height="500" 
        Layout="Center">
        <Items>
            <ext:Container runat="server" Html="This should be at the center" />
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  9. #9
    Feb 23, 2011, 3:55 PM
    Quote Originally Posted by Daniil View Post
    Hmm, it looks like Center layout is broken.

    Here is a sample to reproduce. We are investigating.

    Center layout issue
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel 
        runat="server" 
        Width="500" 
        Height="500" 
        Layout="Center">
        <Items>
            <ext:Container runat="server" Html="This should be at the center" />
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
    The Center Layout is working correctly in this sample. The Container is rendering in the "center" of it's parent Panel and the default width of a Container is 100%.

    If you set the .Width of the Container to "250", you should see it render with equal left/right margins.

    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  10. #10
    Feb 23, 2011, 4:13 PM
    You are right, in your code, center layout works fine.

    I was trying to figure out why mine doesnt work, and did some changes to yours. I the code bellow, center layout doesn't seen work. Beats me why.

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel runat="server" AutoWidth="true" AutoHeight="true" Layout="Center">
        <Items>
            <ext:Container Width="250" runat="server">
                <Items>
                    <ext:DisplayField Text="Hi! I am display field" />
                </Items>
            </ext:Container>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] Localization - EventMasks and stuff without ID?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 08, 2011, 6:02 AM
  2. Layout problems with GridPanel and other stuff - resources for learning layouting in EXT.NET?
    By wagger in forum 1.x Help
    Replies: 0
    Last Post: Mar 25, 2011, 3:12 PM
  3. [CLOSED] Basic Layout question for Layout Fit / AutoHeight
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 07, 2010, 11:57 AM
  4. [1.0] Gridpanel GroupingView flying button
    By SouthDeveloper in forum Bugs
    Replies: 4
    Last Post: Feb 25, 2010, 4:56 PM
  5. [CLOSED] So nice Coolite works with Telerik's (really Microsofts) Ajax Stuff!
    By pkellner in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 13, 2008, 12:42 PM

Posting Permissions