ListGrid setBaseStyle/CSS bug in IE8?

[tomhj]

I found what I believe is a bug in the ListGrid code in IE8. It works fine in FireFox, IE7 and Chrome. I'm using GWT 1.5.3 and SmartGWT 2.1 (also tried the latest 2.2 nightly downloaded June 6 and I also backed off to 2.0 - same problem in all versions).

My ListGrid enables "wrap" within the row and then I use a CellFormatter to build up HTML content for the cell. That all works fine in all browsers. But if I call setBaseStyle() to use custom CSS to style the cell, I'm finding some very strange handling going on with the style.

After much digging, I discovered that if my list grid cell CSS includes a font-family specification with a font that has to be enclosed by single-quotes (because the font name has a space in it), the problem is triggered.

I isolated it into an easily reproducible test program that displays 2 list grids that are exactly the same except for the setBaseStyle() value. One grid uses the complete CSS font list including single-quoted font names while the second grid uses "plain" non-quoted fonts. The "plain" list grid displays perfectly while the "full" list grid seems to be missing several elements from the CSS: vertical-alignment and right border settings.

Also, if I mouse over the row, the style is "reset" and now it looks correct for that row - until the page/grid is resized.

The two attachments show the problem in two phases:

IEproblem1.gif - shows the initial screen. Top grid is "bad" - vertical alignment is centered instead of "top" and cell's right border is not shown.

IEproblem2.gif - shows the top grid after mousing over the first row. Alignment is now "top" and the cell's right border is drawn.

Using IE8's Developer tool and inspecting the "full" list grid html for the "bad" grid, I see that the TD attributes for my list grid cells are mangled:

<td width="627" align="left" style="border-bottom: #a0a0a0 1px solid; padding-bottom: 7px; min-height: 22px; padding-left: 7px; padding-right: 7px; font-family: ;" #000;?="" COLOR:="" #fff;="" 7px;BACKGROUND-COLOR:="" PADDING-TOP:="" solid;="" 1px="" #a0a0a0="" BORDER-RIGHT:="" VERTICAL-ALIGN:="" Grande?,?Lucida="" UI?,?Lucida="" Segoe="" top;="" Sans?,Verdana,Arial,sans-serif;="">

Everything looks ok until the "font-family" style value - which is blank, followed by a bunch of garbage.

It looks like the list grid cell composition code is trying to copy the style attributes that originate in my CSS but is not properly handling the quoted font-family names.

Here is my test program code:

package com.rg.gwt.ieproblem.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.CellFormatter;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class IEProblem implements EntryPoint
{
    private DateTimeFormat dateFormatter;
    
	public void onModuleLoad() 
	{
	    dateFormatter = DateTimeFormat.getFormat("M-dd-yyyy");
	 
	    VLayout vLayout = new VLayout();
	    vLayout.setWidth100();
	    vLayout.setHeight100();
	    
	    vLayout.addMember(makeGrid("fullFontsListGridCell"));
	    vLayout.addMember(makeGrid("plainFontsListGridCell"));
            vLayout.draw();
	}

    private Canvas makeGrid(String baseStyle)
    {
        ListGrid grid = new ListGrid();
        if (baseStyle != null)
            grid.setBaseStyle(baseStyle);
        
        grid.setHeight100();
        grid.setWidth100();
        grid.setWrapCells(true);
        grid.setShowAllRecords(true);
        grid.setFixedRecordHeights(false);
        grid.setCanGroupBy(false);
        grid.setCanEdit(false);

        ListGridField col1 = new ListGridField("col1", "Column 1");
        col1.setWidth("40%");
        col1.setCanEdit(false);
        col1.setCellFormatter(new CellFormatter(){

            public String format(Object value, ListGridRecord record,
                    int rowNum, int colNum) 
            {
                StringBuffer strb = new StringBuffer();
                strb.append("<a class=\"listViewTitle\" target=\"_blank\" href=\"");
                strb.append(record.getAttributeAsString("url"));
                strb.append("\">");
                strb.append(record.getAttributeAsString("title"));
                strb.append("</a><br>");
                strb.append("<span class=\"listViewExcerpt\">");
                strb.append(record.getAttributeAsString("excerpt"));
                strb.append("</span><br>");
                strb.append("<span class=\"listViewUrl\">");
                strb.append(record.getAttributeAsString("url"));
                strb.append("</span>");
                return strb.toString();
            }
        
        });
        
        ListGridField relevance = new ListGridField("relevance", "Relevance");
        relevance.setWidth("10%");
        relevance.setCanEdit(false);
        
        ListGridField info = new ListGridField("info", "Information");
        info.setWidth("30%");
        info.setCanSort(false);
        info.setCanEdit(false);
        info.setCellFormatter(new CellFormatter(){

            public String format(Object value, ListGridRecord record, int rowNum, int colNum) 
            {
                StringBuffer strb = new StringBuffer();
                
                strb.append("<span class=\"listViewPageInfo\">[");
                strb.append(record.getAttributeAsString("fileType").toUpperCase());
                strb.append("] ");
                strb.append(dateFormatter.format(record.getAttributeAsDate("date")));
                strb.append("</span>");
                return strb.toString();
            }
        
        });
        grid.setFields(col1, relevance, info);
        grid.setCanResizeFields(true);
        grid.setData(ListData.getRecords());
        
        return grid;
    }
}

I didn't include the ListData class - it is patterned after the CountryData class from the Showcase application.

The CSS file looks like this:

.fullFontsListGridCell,
.fullFontsListGridCellDark,
.fullFontsListGridCellOver,
.fullFontsListGridCellOverDark,
.fullFontsListGridCellSelected,
.fullFontsListGridCellSelectedDark,
.fullFontsListGridCellSelectedOver,
.fullFontsListGridCellSelectedOverDark,
.fullFontsListGridCellDisabled,
.fullFontsListGridCellDisabledDark {
	border-bottom: 1px solid #a0a0a0;
	border-right: 1px solid #a0a0a0;
	font-family: 'Segoe UI','Lucida Grande','Lucida Sans',Verdana,Arial,sans-serif;
	padding: 7px;
	vertical-align: top;
}

.fullFontsListGridCell,
.fullFontsListGridCellDark {
	color: #000;
	background-color: #FFF;
}

.fullFontsListGridCellOver,
.fullFontsListGridCellOverDark {
	color: #000;
	background-color: #E5F6FF;
}

.fullFontsListGridCellSelected,
.fullFontsListGridCellSelectedDark {
	color: #FFF;
	background-color: #D4E8FF;
}

.fullFontsListGridCellSelectedOver,
.fullFontsListGridCellSelectedOverDark {
	color: #FFF;
	background-color: #A2CBFF;
}

.plainFontsListGridCell,
.plainFontsListGridCellDark,
.plainFontsListGridCellOver,
.plainFontsListGridCellOverDark,
.plainFontsListGridCellSelected,
.plainFontsListGridCellSelectedDark,
.plainFontsListGridCellSelectedOver,
.plainFontsListGridCellSelectedOverDark,
.plainFontsListGridCellDisabled,
.plainFontsListGridCellDisabledDark {
	border-bottom: 1px solid #a0a0a0;
	border-right: 1px solid #a0a0a0;
	font-family: Verdana,Arial,sans-serif;
	padding: 7px;
	vertical-align: top;
}

.plainFontsListGridCell,
.plainFontsListGridCellDark {
	color: #000;
	background-color: #FFF;
}

.plainFontsListGridCellOver,
.plainFontsListGridCellOverDark {
	color: #000;
	background-color: #E5F6FF;
}

.plainFontsListGridCellSelected,
.plainFontsListGridCellSelectedDark {
	color: #FFF;
	background-color: #D4E8FF;
}

.plainFontsListGridCellSelectedOver,
.plainFontsListGridCellSelectedOverDark {
	color: #FFF;
	background-color: #A2CBFF;
}

.listViewTitle,
.listViewExcerpt,
.listViewPageInfo,
.listViewPageHighlightInfo,
.listViewFileFormat,
.listViewUrl {
	font-size:13px; 
	line-height: 19px;
	font-family: 'Segoe UI','Lucida Grande','Lucida Sans',Verdana,Arial,sans-serif;
	color: #000;
}

.listViewTitle{
	font-size:16px;
	line-height: 22px; 
	font-weight: bold;
}
.listViewPageInfo{
	color:#1A1A1A;
}

.listViewPageInfo.divider,
.flexTable.divider{
	color:#999;
}

and for completeness, here is the html file:

<html>
	<head>
		<title>Wrapper HTML for IEProblem</title>
		<meta name='gwt:module' content='com.rg.gwt.ieproblem.IEProblem'/>
		<link type="text/css" rel='stylesheet' href='IEProblem.css'/>
	</head>
	<body>
		<script language="javascript" src="com.rg.gwt.ieproblem.IEProblem.nocache.js"></script>

		<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
	</body>
</html>

[Isomorphic]

Thanks for the complete info here - very helpful.
We've now resolved this issue - the fix will show up in the nightly builds from now on.

If you want to workaround this temporarily with the build you have, you can either modify your css style definition to use a double-quote char rather than a single-quote char to quote the font names in question, or you can set 'fastCellUpdates' to false on your ListGrid(s)

Regards
Isomorphic Software

[tomhj]

Excellent - using setFastCellUpdates(false) works fine for now.

Thank you!