IE8 GroupNodeStyle

[tgilbert]

Hi,

I'm customizing my ListGrid subclass this way:

this.setGroupByField("BUNIT_NAME");
this.setFixedRecordHeights(false);
this.setGroupStartOpen(GroupStartOpen.ALL);
this.setCanCollapseGroup(false);
this.setGroupNodeStyle("grouptest");
this.setWrapCells(false);
this.setAlternateRecordStyles(false);
this.indentFirstColumn(20);

The problem I have is that the "grouptest" class name I have configured for the group nodes does not appear in the IE8 HTML page.

Here is the group row in IE10 (it does also work on FireFox and Chrome)

<tr role="listitem" aria-posinset="6" aria-setsize="7">
	<td align="left" class="grouptest" style="height: 16px; overflow: hidden; white-space: nowrap;" colspan="1">
		<span style='width: 1px; height: 1px; vertical-align: text-top; display: inline-block; background-image: url("http://127.0.0.1:8888/application/sc/skins/Graphite/images/blank.gif"); background-size: 100% 100%;'></span>
		<span style='width: 3px; height: 1px; vertical-align: text-top; display: inline-block; background-image: url("http://127.0.0.1:8888/application/sc/skins/Graphite/images/blank.gif"); background-size: 100% 100%;'></span>
	My BU
	</td>
</tr>

Here is the IE8 one:

<tr role="listitem">
	<td align="left" style="height: 18px; overflow: hidden; white-space: nowrap;" colSpan="1">
		<img width="1" height="1" align="textTop" src="http://127.0.0.1:8888/application/sc/skins/Graphite/images/blank.gif" border="0" suppress="TRUE"/>
		<img width="3" height="1" align="textTop" src="http://127.0.0.1:8888/application/sc/skins/Graphite/images/blank.gif" border="0" suppress="TRUE"/>
	myBU
	</td>
</tr>

Thanks,
Thomas

[Isomorphic]

Can you fill in required basics such as your exact version?

Can you reproduce this by adding your CSS style and minimal code to a sample?

[tgilbert]

Sure, we are using version 4.0 (power), here is what I have in the console: SmartClient Version: v9.0p_2013-10-17/PowerEdition Deployment (built 2013-10-17)

Here is a full example to reproduce the problem:

The code :

DataSource.load(DSOperator.DS_NAME, new Function() {
			@Override
			public void execute() {
				ListGrid grid = new ListGrid(DataSource.get(DSOperator.DS_NAME));
				grid.setHeight100();
				grid.setWidth(400);
				grid.setGroupByField(DSOperator.BUNIT_NAME);
				grid.setGroupNodeStyle("simpleTest");
				grid.draw();
				grid.setFields(new ListGridField(DSOperator.NAME, "Name"));
				grid.fetchData();
			}
		}, false);

The CSS (just an ungly but easy to notice example!) :

.simpleTest {
	color: red !important;
	background-color: yellow !important;
}

In IE10, the "class='simpleTest' appears in the HTML document for the group nodes:
(see ie10 screenshot)

<tr role="listitem" aria-posinset="1" aria-setsize="10"> 
<td height="20" align="left" class="simpleTest" style="padding-top: 0px; padding-bottom: 0px; white-space: nowrap;" colspan="1">
[...]

In IE8, it does not...

<td align="left" style="height: 17px; overflow: hidden; white-space: nowrap;" colSpan="1">

However, after all the tests I did, it seems that the source of the problem is that the CSS class is defined in an included CSS file (using @import in the main CSS file). As soon as I move the CSS class (which we should not afford) to the main file, the problem disappears.

Hoping it helps,

Thomas

[Isomorphic]

Ah, this makes sense - see GridRenderer.fastCellUpdates.

To get around bugs in older IE we need to apply your CSS styles via the "style" attribute rather than the the usual "class" attribute. We can't do this if the CSS is loaded from another domain.

[tgilbert]

Hi !
It's not loaded from an other domain, the files are local in the same directory. Does it change something for you ? No way to simply open those files and continue your work ?

[Isomorphic]

Sorry, what? You just remarked that the problem is solved:

However, after all the tests I did, it seems that the source of the problem is that the CSS class is defined in an included CSS file (using @import in the main CSS file). As soon as I move the CSS class (which we should not afford) to the main file, the problem disappears.

We were just explaining why moving the CSS file corrects the problem. It's in the documentation for GridRenderer.fastCellUpdates.

What work were you expecting to continue?

[tgilbert]

Sorry for this misunderstanding. Yes it solves the problem to move a class from a CSS file to the main one, but we would like to avoid that because we have css files coming from different teams/modules and don't want to mix them all.
I just would like to know if the fact that the file is not in a remote server but just local, in the same directory of the main CSS file, could help you make this possible ? Any other work-around ?

Thanks!
Thomas

[Isomorphic]

Probably this is your confusion:

It's not loaded from an other domain, the files are local in the same directory

The browser doesn't know anything about how you have things in the filesystem. The browser knows about the URL only. The CSS must be loaded from the same domain as the .html file, or it's contents will be made inaccessible to JavaScript running in the page.