[OPEN] [#1832] staggered columns

  1. #1

    [OPEN] [#1832] staggered columns

    Hi,
    I have a problem with the alignment of the columns with respect to the header when I change the browser zoom.

    Click image for larger version. 

Name:	grid.jpg 
Views:	135 
Size:	83.4 KB 
ID:	25448

    below the code used, but it is that of the example grid -> layout -> fitlayout, only with more columns
    thanks,
    Guglielmo

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = this.Jobs;
            this.Store1.DataBind();
        }
    
        private List<Job> Jobs
        {
            get
            {
                List<Job> jobs = new List<Job>();
    
                for (int i = 1; i <= 50; i++)
                {
                    jobs.Add(new Job(
                                i,
                                "Task" + i.ToString(),
                                DateTime.Today.AddDays(i),
                                DateTime.Today.AddDays(i + i),
                                (i%3 == 0)));
                }
    
                return jobs;
            }
        }
    
        public class Job
        {
            public Job(int id, string name, DateTime start, DateTime end, bool completed)
            {
                this.ID = id;
                this.Name = name;
                this.Start = start;
                this.End = end;
                this.Completed = completed;
            }
    
            public int ID { get; set; }
            public string Name { get; set; }
            public DateTime Start { get; set; }
            public DateTime End { get; set; }
            public bool Completed { get; set; }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>GridPanel with FitLayout - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Theme="Material" />
    
             <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                    <Items>
                    <ext:GridPanel
                        runat="server" Layout="FitLayout" ForceFit="true"
                        Header="false" ColumnLines="true"
                        Border="false">
                        <Store>
                            <ext:Store ID="Store1" runat="server" PageSize="10">
                                <Model>
                                    <ext:Model runat="server" IDProperty="ID">
                                        <Fields>
                                            <ext:ModelField Name="ID" />
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Start" Type="Date" />
                                            <ext:ModelField Name="End" Type="Date" />
                                            <ext:ModelField Name="Completed" Type="Boolean" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server"
                                    Text="ID"
                                    Width="40"
                                    Sortable="true"
                                    DataIndex="ID">
                                    <Filter>
                                        <ext:NumberFilter />
                                    </Filter>
                                </ext:Column>
                                <ext:Column runat="server"
                                    Text="Job Name"
                                    Sortable="true"
                                    DataIndex="Name"
                                    Flex="1">
                                    <Filter>
                                        <ext:StringFilter />
                                    </Filter>
                                </ext:Column>
                                <ext:DateColumn runat="server"
                                    Text="Start"
                                    Width="120"
                                    Sortable="true"
                                    DataIndex="Start"
                                    Format="yyyy-MM-dd">
                                    <Filter>
                                        <ext:DateFilter>
                                            <DatePickerOptions runat="server" TodayText="Now" />
                                        </ext:DateFilter>
                                    </Filter>
                                </ext:DateColumn>
                                <ext:DateColumn runat="server"
                                    Text="End"
                                    Width="120"
                                    Sortable="true"
                                    DataIndex="End"
                                    Format="yyyy-MM-dd">
                                    <Filter>
                                        <ext:DateFilter>
                                            <DatePickerOptions runat="server" TodayText="Now" />
                                        </ext:DateFilter>
                                    </Filter>
                                </ext:DateColumn>
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed">
                                    <Renderer Handler="return (value) ? 'Yes':'No';" />
                                    <Filter>
                                        <ext:BooleanFilter />
                                    </Filter>
                                </ext:Column>
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                
                                    
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
                                    
                                <ext:Column runat="server"
                                    Text="Completed"
                                    Width="80"
                                    Sortable="true"
                                    DataIndex="Completed" />
    
                                 <ext:CheckColumn ID="Certifica" DataIndex="Certifica" runat="server" Text="<b>Cert</b>" Width="50" Editable="true"
                                        Align="Center" Sortable="False">
                                    </ext:CheckColumn>
                                    <ext:ImageCommandColumn ID="ImageCommandColumn2" runat="server" Width="40" Align="Center" IconCls="x-fa fa-save">
                                        
                                    </ext:ImageCommandColumn>
                                     <ext:ImageCommandColumn ID="CommandColumn1" runat="server" Width="40" Align="Center" IconCls="x-fa fa-save">
                                    </ext:ImageCommandColumn>
                            </Columns>
                        </ColumnModel>
                        <View>
                            <ext:GridView runat="server" LoadMask="false" />
                        </View>
                        <Plugins>
                            <ext:GridFilters runat="server" />
                        </Plugins>
                        <BottomBar>
                            <ext:PagingToolbar
                                runat="server"
                                DisplayInfo="true"
                                DisplayMsg="Displaying Jobs {0} - {1} of {2}"
                                />
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  2. #2
    Thanks for the sample. We will investigate.

    What browser are you using and is your browser zoom level set to 100%?
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by webmanufacturing
    I have a problem with the alignment of the columns with respect to the header when I change the browser zoom.
    I'm afraid browser zoom is known to break display on some Ext.NET artifacts. This is a design limitation from the upper level framework, Ext JS, and we couldn't find feasible fixes for this, unfortunately. It all works on top of the assumption browser zoom is fixed at 100% (not zoomed in, not zoomed out), unfortunately.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    hi, sorry for the late response.
    The browser used is Google Chrome.
    The problem also occurs at 100% zoom. In the sample, to ensure that everything is aligned, i had to set the zoom to 80%.
    It might not be a big deal if there was a way to force and constrain the zoom of the browser, but i haven't found a way to do that...
    Greetings
    Guglielmo
  5. #5
    Hello Guglielmo!

    We have another thread running in parallel and it turns out also setting Windows' DPI affects the browser zooming. May it be the case you use 125% scaling on your Windows' display settings?

    If that's the case for you too, we may have another argument to fill Sencha with so a fix (or design review, or at least support for 125%) could happen.
  6. #6
    yes, i use 125%
    thanks for the support
  7. #7
    Hello Guglielmo!

    We are not going to leave this like this. We'll contact Sencha and talk about this windows scaling issue, maybe we can at least get it to work at 125%, or in the least fix the issues pointed, but we really need to do something about this!

    At the same time, we have seen that google chrome, knowing the current MS-Edge version uses the same chromium engine, has issues with other websites that bothers the general public. So most likely we also fall into this segment.

    We have logged this issue as #1832 at GitHub and will post updates here as we have news about the issue. Unfortunately for the time being the remedy is to remove grid lines or disable zoom. If you happen to take on CSS to find a solution that works for you in your case, don't hesitate to share, as this might point towards definitive solutions at least for zooming where grid lines are concerned.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hello again Guglielmo!

    I was just looking up this issue and noticed that the ForceFit="true" setting is at least "enhancing" the issue. Once it is not set, you only get noticeable misalignment when you zoom out to, like 67% on google chrome, and Firefox no longer reproduces the misalignment issue. This might help you with the issue until a definitive fix is in place.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Jan 13, 2017, 1:04 AM
  2. Replies: 2
    Last Post: Jun 23, 2015, 11:40 AM
  3. Replies: 1
    Last Post: Jan 06, 2015, 11:18 AM
  4. [OPEN] [#96] ColumnHeaderGroup Hideable columns
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 12, 2013, 9:33 AM
  5. Replies: 0
    Last Post: Oct 10, 2008, 12:24 AM

Posting Permissions