Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    IE8 ListGrid alignment problem when using Compatibility View. DOCTYPE: loose.dtd

    Hi,

    I have come across a ListGrid alignment problem in IE8 when using Compatibility View. I am using GWT 2.4.0 and the SmartGWT Pro 3.1 release candidate nightly build from the 1st of October - SNAPSHOT_v8.3d_2012-10-01/LGPL Development Only (built 2012-10-01).

    If I use the hostname of my server to connect to my webapp, it is considered to be a local intranet site and IE8’s Developer Tools show “Browser Mode: IE8 Compat View”, whereas if I use the IP address, it is considered to be an Internet site and I see “Browser Mode: IE8”.

    I have attached the following images that show the problem:
    - LocalIntranet.png – Shows column cells don’t match-up with headers when connecting to a Local Intranet site.
    - Internet.png – Show alignment is fine when browser considers site to be an Internet site.
    - LocalIntranetModes.png – Shows “Browser Mode: IE8 Compat View” when connecting to a Local Intranet site.
    - InternetModes.png - Shows “Browser Mode: IE8” when connecting to an Internet site.

    By default, our computers have Windows 7 and have the “Display intranet sites in Compatibility View” option enabled in the IE8 Compatibility View Settings (see IE8-CompatibilityViewSettings.png).

    We use the HTML 4.01 Transitional loose.dtd DOCTYPE and specify <meta http-equiv="X-UA-Compatible" content="IE=9"> in our HTML file. The full HTML file is as follows:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=9">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<meta name="robots" content="all">
	<meta http-equiv="Content-Language" content="en-us">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="ListGridColAlignmentIssue.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="listgridcolalignmentissue/listgridcolalignmentissue.nocache.js"></script>

  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
   
  </body>
</html>
    My .css has borders added to the table cells to show the alignment problem:

    Code:
    .cell,
.cellDark,
.cellOver,
.cellOverDark,
.cellSelected,
.cellSelectedDark,
.cellSelectedOver,
.cellSelectedOverDark,
.cellDisabled,
.cellDisabledDark,
.tallCell,
.tallCellDark,
.tallCellOver,
.tallCellOverDark,
.tallCellSelected,
.tallCellSelectedDark,
.tallCellSelectedOver,
.tallCellSelectedOverDark,
.tallCellDisabled,
.tallCellDisabledDark,
.groupNode {
 border-right: 1px solid #e3e3e3;
}
    Is it possible to fix the release candidate so that this problem is not seen when IE8 is set to render in Compatability View? We cannot require our customers to disable this option, as they could be relying on it for other corporate webapps.

    Regards,

    Andrew
    Attached Files
    Tags: None
    #2
    In case it helps, here is my EntryPoint class:

    Code:
    package com.test.listgridcolalignmentissue.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;

/**
 * Main application class with entry point: <code>onModuleLoad()</code>.
 */
public class EmUiApp implements EntryPoint {


	/**
	 * This is the application entry point method.
	 */
	public void onModuleLoad() {

		// sets windows title
		Window.setTitle("ListGrid alignment issue");

	
		ListGridField rowNum = new ListGridField("itemNum", "Item No.", 50);   
	    rowNum.setWidth(65);   
	    ListGridField itemName = new ListGridField("itemName", "Item name", 100);   
	    ListGridField description = new ListGridField("description", "Description");   

	    final ListGrid listGrid = new ListGrid();   
	    listGrid.setWidth(300);
	    listGrid.setHeight100();   
	    listGrid.setAutoFetchData(true);
	    ListGridRecord dataElement1= new ListGridRecord();
	    dataElement1.setAttribute("itemNum", 1);
	    dataElement1.setAttribute("itemName", "One");
	    dataElement1.setAttribute("description", "Number one");
	    ListGridRecord dataElement2= new ListGridRecord();
	    dataElement2.setAttribute("itemNum", 2);
	    dataElement2.setAttribute("itemName", "Two");
	    dataElement2.setAttribute("description", "Number two");

	    
	    ListGridRecord[] data = new ListGridRecord[]{dataElement1, dataElement2};
	    
	    listGrid.setData(data);   
	        listGrid.setFields(rowNum, itemName,  description);
	        listGrid.setCellPadding(10);
	    listGrid.draw();  
		
	}

}

    Comment

    Previous template Next
    Working...
    X