What's New?

[CLOSED] Display problems on Chrome and Firefox

  1. #1
    May 17, 2011, 4:05 PM

    [CLOSED] Display problems on Chrome and Firefox

    Hi,

    wil the following code i noticed a strange display problem using Chrome (version 11.0.696.68) and Firefox (v. 4.0.1).

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ 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 id="Head1" runat="server">
    <title>Test</title>
    <ext:ResourcePlaceHolder ID="MainResourcePlaceHolder" runat="server" />
    <script type="text/javascript">
        var linkClick = function (code) {
            alert('Hi, ' + code);
        };
        var myRenderer = function (value, meta, record) {
            return value;
            var theImage;
            if (record.data.TaskId == 70) {
                theImage = 'Lock_Close_Red';
            }
            else {
                theImage = 'Lock_Open_Green';
            }
            var s1 = String.format('<img src="/EasyRapp/Content/Images/{0}.png" style="vertical-align:middle;" ext:qtip="Image qtip" />', theImage);
            var s2 = String.format("<a href='#' onclick='linkClick(\"{0}\");' ext:qtip=\"Text qtip\">{1}</a>", record.data.TaskName, record.data.TaskCode);
            return s1 + '&nbsp;&nbsp;' + s2;
        };
    </script>
    </head>
    <body>
        <ext:ResourceManager ID="MainScriptManager" runat="server" />
 
        <ext:Viewport ID="TheViewport" runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel
                    ID="TheGridPanel"
                    runat="server" 
                    Header="false"
                    Border="false"
                    StripeRows="true"
                    TrackMouseOver="true">
                    <TopBar>
                        <ext:Toolbar ID="TheToolbar" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Icon="Application" Text="Test" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Store>
                        <ext:Store ID="TheDataStore" runat="server" AutoLoad="true">
                            <Proxy>
                                <ext:HttpProxy Url="/EasyRapp/Task/GetAbsenceTaskList/" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="TaskId" Root="data">
                                    <Fields>
                                        <ext:RecordField Name="TaskId" SortDir="ASC" />
                                        <ext:RecordField Name="TaskName" />
                                        <ext:RecordField Name="TaskCode" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <SortInfo Field="TaskId" Direction="ASC" />
                        </ext:Store>
                    </Store>
 
                    <ColumnModel ID="TheColumnModel" runat="server">
                        <Columns>
                            <ext:Column ColumnID="TaskCode" DataIndex="TaskCode" Header="Name" Locked="true">
                                <Renderer Fn="myRenderer" />
                            </ext:Column>
                            <ext:Column ColumnID="TaskId" DataIndex="TaskId" Header="Id"/>
                            <ext:Column ColumnID="TaskName" DataIndex="TaskName" Header="Description"/>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" />
                    </SelectionModel>
                    <View>
                        <ext:LockingGridView ID="TheGridView" runat="server" SyncHeights="true" />
                    </View>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </body>
</html>
    In the attached image, you can notice that rows are not correctly aligned and in the last four rows the column "Description" is empty.
    Please consider also that IE (v. 8.0.7600.16385) works fine and that the images 'Lock_Close_Red' and 'Lock_Open_Green' are 16x16 pixel large.

    Bye,
    Stefano
    Last edited by Daniil; May 18, 2011 at 10:02 AM. Reason: [CLOSED]
  2. #2
    May 17, 2011, 4:21 PM
    Hi,

    Please do not consider in my example the first row of the function 'myRenderer'. The row 'return value' was inserted for debugging.
    Also, I forgot to point out that, after the first page loading, if you reload the page the problem disapper in both browsers!!


    Bye,
    Stefano
  3. #3
    May 17, 2011, 5:12 PM
    Hi,

    Please set SyncHeights="true" for LockingGridView
  4. #4
    May 17, 2011, 5:20 PM
    Hi,

    if you read the code, you can see that the attribute is already set .....

    Bye,
    Stefano
  5. #5
    May 17, 2011, 5:21 PM
    Hi,

    Oups, sorry, did not notice it
  6. #6
    May 17, 2011, 5:40 PM
    Hi,

    Well, I guess that first time (when the image is not loaded yet) LockingGridView cannot determine row height because image is not loaded and size is not known
    I suggest to defined image size in the renderer (see style in the image tag - style="vertical-align:middle;width:16px;height:16px;")
    var myRenderer = function (value, meta, record) {

            var theImage;
            if (record.data.TaskId == 70) {
                theImage = 'clock';
            }
            else {
                theImage = 'clock';
            }
            var s1 = String.format('<img src="{0}.png" style="vertical-align:middle;width:16px;height:16px;" ext:qtip="Image qtip" />', theImage);
            var s2 = String.format("<a href='#' onclick='linkClick(\"{0}\");' ext:qtip=\"Text qtip\">{1}</a>", record.data.TaskName, record.data.TaskCode);
            return s1 + '&nbsp;&nbsp;' + s2;
        };
  7. #7
    May 18, 2011, 6:18 AM
    Hi Vladimir,

    your solution works fine.

    Thanks,
    Stefano

Similar Threads

  1. [CLOSED] Compatibility with chrome and firefox issue
    By imaa in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 20, 2011, 10:42 PM
  2. [CLOSED] Problem with Firefox and Chrome
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 07, 2011, 12:43 PM
  3. Problem with a example in Chrome and Firefox...
    By Tanielian in forum 1.x Help
    Replies: 2
    Last Post: Apr 07, 2011, 6:14 PM
  4. Problem with Session in IE, but not in Firefox and Chrome
    By gpcontreras in forum 1.x Help
    Replies: 2
    Last Post: Feb 05, 2010, 5:20 PM
  5. Field Focus Different from IE then Firefox and Chrome
    By Juls in forum 1.x Help
    Replies: 0
    Last Post: Jun 03, 2009, 3:14 PM

Tags for this Thread

Posting Permissions