tile grid header - sorting arrow misaligned issue

[karankhokhani]

smartgwt version
Version v9.1p_2014-06-30/Enterprise Deployment (2014-06-30)

browser
ie8 and ie9 (quirks mode)

smartgwt application is loaded in an iframe. it has the html5 doctype added. the parent frame is in quirks mode. Tilegrid header sorting arrow is misaligned on selection of header which makes it difficult to view the title (screenshot attached). I even tried removing all the other css used by the application but no luck. It still has the issue.

Could you please let me know if there is a fix for this.

Thanks

[Isomorphic]

This is the same unsupported mode we discussed with you before.

If this issue happens in a supported mode too, we could treat it as a bug, but it's virtually certain (from your screenshot) that it does not - we'd have dozens of reports of such a bug.

[karankhokhani]

http://forums.smartclient.com/showthread.php?t=30698&page=3 was an issue due to Compatibility View in IE. For which you said you do not support Compat View

The tilegrid header issue does not happen in Compat View mode. I'm not using Compatibility View.

[Isomorphic]

It's the same situation - IE has a limitation that an inner frame cannot use a different document mode as compared to the outer frame. So while you have (correctly) set HTML5 DOCTYPE in your inner frame, IE is ignoring this, and so you've got IE9 running in quirks mode.

It may be that somehow we're misunderstanding your settings, if so, just show us HTML for the outer and inner frame that we can run to see the problem.

[karankhokhani]

Yes, that's correct. The outer frame is in quirks mode so the inner frame ignores the HTML5 doctype in IE.

This is not supported either? There is no solution to this?

[Isomorphic]

We covered this in depth in your other thread:

And, as we cover in the FAQ, there is no way to support Compatibility View for IE9+. Microsoft has caused basic JavaScript functions (such as eval()) to leak memory and marked this a WONTFIX issue, but in Compatibility View, they also disable the HTML5 capabilities that would provide the only viable replacement.

...

As we mentioned, because this mode is fundamentally broken, we can't accept bugs filed against it as real bugs.

...

While we've bent over backwards to make it so that all browser modes work in all browsers, in this particular area, Microsoft has backed everyone into a corner with a series of intersecting bugs that ultimately cannot be fully worked around.

The above all applies to quirks mode for IE9 as well. It's a crappy situation, but not one we've created.

[pkonigsberg]

The issue in the header occurs in ie8 (or with compat view in a later version, since that's really ie7) when in standards mode, when NOT in an iframe. That combination of version and mode uses .imgHeaderButtonXXX css class as well as an extra div around the text in the header. Adding the following css works around the issue, along with the fact that the sort-arrow should be on the right as well. Please fix this as soon as possible. thx..Paul

.listGrid .headerBar .imgHeaderButtonSelected div div, .listGrid .headerBar .imgHeaderButtonSelectedOver div div {
display: inline-block;
float: left;
}

[Isomorphic]

We'll take a look and follow up when we have more information.

Thanks
Isomorphic Software

[Isomorphic]

We're not able to reproduce this issue.

We've been testing using the #grid_sort_sort example in the Showcase, using IE8 in Strict and Quirks modes, and the EnterpriseBlue skin.
We've checked the 3.1p branch, the 4.1p branch and the 5.0d branch, and haven't seen an issue where the sort arrow image wrapped.

Can you show us some code or point us to a sample which will reproduce this issue?

Also which OS are you seeing this in?

Thanks
Isomorphic Software

[pkonigsberg]

I'm testing with:
Window 7 Professional, IE version: 8.0.7601.17514, Browser Mode: IE8, Document Mode: IE8 Standards

I tried against public showcase and looked at the dom. I see that for the nested img, it has an inline style (ie written out in the dom by smartclient) of "float: right". I tried equivalent workaround in css and that worked equally well (css below). So the remaining question is why is the public version writing out "float: right", but our version not. If you can compare OS/env diffs, I will dig into patch/version diffs of SC. Thx../Paul

.listGrid .headerBar .imgHeaderButtonSelected img, .listGrid .headerBar .imgHeaderButtonSelectedOver img {
float: right;
}

[pkonigsberg]

According to SC Dev console, we are using v9.1p_2014-06-30/Enterprise Deployment (built 2014-06-30)

According to SC Dev console, the showcase is using SmartClient Version: v9.1p_2014-08-24/LGPL Development Only (built 2014-08-24)

Any chance there was a fix/patch done for either in the LGPL branch only or between 6-30 and 8-24 that addressed this issue? (I can find release notes for all the versions in there published anywhere)

[pkonigsberg]

Also, in case it matters, we use smartgwt, so our smartclient came from the smartgwt download, which we download via maven.

[Isomorphic]

We've done some testing using the build you reference (actually the 2014-06-29 build), and we're still not reproducing this issue.
At this stage, we suspect there's something special about your application which is causing this - something in the configuration of the ListGrid itself, or something else, like a skin you are loading, etc.

Each package includes the showcase application - to rule out environment issues (IE Browser / OS / specific client machine configuration stuff), could you test locally against that and see if you can reproduce the issue on our shipped samples?

Assuming not, we'll probably need to see a test case to determine what is special about your usage which is causing this bug.

Thanks
Isomorphic Software