Column header discrepancy between Chrome and Firefox

[senordhuff]

Hi, we are seeing inconsistent behavior between Google Chrome and Firefox with ListGrid column headers.

Go to this example:
http://www.smartclient.com/?skin=SmartClient#columnSize

Use the code below. When you try it in Google Chrome, it inserts a line break after "Risk-". However, when you try it with Firefox 5, there is no line-break.

Any idea why this is happening?

 isc.ListGrid.create({
    ID: "countryList",
    headerHeight:36,
     autoSize:true,
        headerButtonProperties:{
            wrap:true
},
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryCode", overflow:"visible", title:"Risk-Adjusted<br>Return<br>(Equal Prob.)", width:"8%", type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    canResizeFields: true
})

[Isomorphic]

Browsers aren't generally perfectly consistent on wrapping content. If you want to avoid that particular break, <nobr> tags would probably work. If you want to control line breaks in general, there are CSS settings for this, but we're not familiar with how closely FF or Chrome hew to standards in this particular area (it doesn't affect any of the behavior guarantees we make).

[senordhuff]

Hi, I'm noticing a similar but different problem that is impacting a lot of our grids with Firefox on windows 7.

If you paste the following into the Example referenced below, the last word of the header "Flag of our Fathers" is cut off. This doesn't happen with Chrome or IE on any OS and it doesn't happen with Firefox on Windows XP. And, it doesn't seem to happen all the time with Firefox on Windows 7. But, it is happening for multiple users with Firefox 5 and it makes it very difficult to read column headers. Any suggestion on how to avoid that last word getting cut off? I've tried a few different things with no success so far.

Here is the snippet:

 isc.ListGrid.create({    ID: "countryList",    headerHeight:36,     autoSize:true,        headerButtonProperties:{            wrap:true},    width:500, height:224, 
alternateRecordStyles:true,    data: countryData,    fields:[        {name:"countryCode", overflow:"visible", title:"Flag of our Fathers", 
width:"8%", type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},        {name:"countryName", title:"Country"},        {name:"capital", title:"Capital"},        {name:"continent", title:"Continent"}    ],    canResizeFields: true})

[Isomorphic]

It's not cut off with FF5 on Window 7. It's unlikely that the web page has any real control over this other than by making the header wider.

[senordhuff]

Hi, that is why I specified that "it doesn't seem to happen all the time with Firefox on Windows 7". It is happening though. And, our end users are complaining that they can't see the entire column header and thus they can't determine which columns they are looking at. So, it is a real production issue we are having. And, I've been able to recreate it from multiple machines. I'm guessing if you tried a few different machines, you'd see the same thing.

I've attached a screenshot showing the cutoff look in Firefox.

I wish that we could just make the header wider. But, we absolutely depend on the ability to display 3 lines worth of text in the headers. We have hundreds of columns worth of data we display. And, many headers that are large enough that we need to use 3 lines worth of text like this to distinguish between them. And, our users need to be able to display as many columns at one time as possible. So, we need some way to ensure that all 3 header lines are always visible so they can maximize the number of visible columns at one time.

So, is there some setting that can ensure that the height of the Headers will accommodate 3 lines of text?

[Isomorphic]

We thought you were complaining about the point where the text was wrapping.

You could really only get the effect you're seeing by introducing CSS line-height settings or similar.

Your screenshot is clearly from a customized skin (header color text is different) so look for how you might be loading additional CSS that causes this effect. If it's intermittent maybe it's being introduced as part of specific component loads, perhaps third-party components.

[senordhuff]

That screenshot is directly from your Feature Explorer here:
http://www.smartclient.com/?skin=SmartClient#columnSize

Using this snippet:

isc.ListGrid.create({    ID: "countryList",    headerHeight:36,     autoSize:true,        headerButtonProperties:{            wrap:true},    width:500, height:224, alternateRecordStyles:true,    data: countryData,    fields:[        {name:"countryCode", overflow:"visible", title:"Flag of our Fathers", width:"8%", type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},        {name:"countryName", title:"Country"},        {name:"capital", title:"Capital"},        {name:"continent", title:"Continent"}    ],    canResizeFields: true})

So, since there is no customized skin and no additional CSS causing that effect...any ideas what we can do?

[Isomorphic]

We're not seeing that effect, but, this is exactly why we'd suggest looking into third-party libraries or CSS you might be loading. The website uses Cufon, JQuery, etc - they might be somehow causing this effect for you, although again, it can't be reproduced over here, so this might also be caused by a browser extension or other machine-specific issue.

[Isomorphic]

Just to clarify further - let's say we had an intermittent issue where we sized the DIV containing the text too tall, or applied padding twice, something like that. No such problem could cause this effect because no such mistake would affect the CSS line-height, line-spacing etc, which is the problem you're seeing here. And SmartClient does not manipulate line-height, line-spacing etc at all - these don't appear anywhere in the codebase.

[senordhuff]

Since we are seeing this effect from multiple testing machines using your Feature Explorer and not our own code, I'm really hoping there is some workaround for this. Is there no way to control the header height in this situation?

[Isomorphic]

Uh and to follow-up once more, since you can reproduce this, you should check with Firebug to see if you have a style applied which does have a line-height setting.

[senordhuff]

Ugh, never-mind...if I just change the headerHeight to a bigger number, then this problem goes away. I think maybe you thought I was asking something else. But, simply changing headerHeight to 48 solves my problem. Sorry if I confused you on this somehow. Definitely should've figured that out on my own.

[Isomorphic]

Yes, that will definitely fix it no matter what the cause, we just didn't think you'd be OK burning the pixels. Note again that experimenting with Firebug you can probably fine a way around this. Even if you can't figure out what CSS is introducing this issue, an explicit setting of line-height / line-spacing will probably correct it.