listgrid header text truncated in Firefox when sort number is displayed

[sylobiwan]

Hello,

My version of isomorphic is v9.1p_2015-03-26/Pro Development Only (2015-03-26).
NOK with Firefox 39.0.
Tested OK with Chrome 44.0.2403.155.

I've created a simple ListGrid with following fields:

<fields>
  <field name="fieldName1" title="fieldName 1" headerTitle=" "  type="integer"  align="center"  width="35" icon="[SKINIMG]/FieldName1.png"/>
  <field name="fieldName2" title="Group Name test" primaryKey="true" type="text" align="left" cellalign="left" width="138"/>
  <field name="fieldName3" headerTitle=" " title="fieldName 3"  type="integer" align="center"  width="35"  icon="[SKINIMG]/fieldName3.png"/>
  <field name="fieldName4" headerTitle=" " type="integer" title="FieldNAme 4" align="center"  width="35" icon="[SKINIMG]/fieldName4.png"/>
  <field name="fieldName5" headerTitle=" " type="integer" customizedTooltip="true" title="fieldName 5" align="center"  width="35" icon="[SKINIMG]/fieldNAme5.png"/>
</fields>

When I want to apply a multiple sorting, then, in Firefox, the text of the second field is truncated to display the number of the sort.
This is not the case with Chrome and IE11 (I've attached a screen capture for Firefox and a one with Chrome to show the difference).

To solve the problem, I've added, through the debugger embedded in Firefox, a CSS property (float: left) to the DIV that contains the text "Group Name Test".
It corresponds to the line n°58063 in the file ISC_Grids.js (when the style is applied to the DIV, method getButtonHeaderTitle()).
This is a temporary hack that doesn't support RTL text support for instance.

I've seen nothing in the Bugzilla database about a possible bug from Firefox.

[Isomorphic]

This looks like a heavily customized skin on an old version which is not up to date on patches.

Let us know if you can reproduce this in the latest patched 10.0 with a standard unmodified skin that comes with the product, no external CSS, and correct DOCTYPE (see FAQ).

[sylobiwan]

Thanks for your response.
Indeed, both listgrid's header and sorting arrow are CSS customized.
I've finally found a solution that doesn't impact Chrome and IE11.
In the customized CSS, I've added following pseudo CSS class (assumed that gridHeadercustomized is the name of the CSS class applied to the header):

.gridHeadercustomizedSelectedOver div:nth-of-type(1),
.gridHeadercustomizedSelectedDown div:nth-of-type(1),
.gridHeadercustomizedrSelected div:nth-of-type(1) {
  float: left;
}

[Isomorphic]

If that's working for your current use case, great.

While this CSS is applied, please do not report any bugs related to auto-sizing of grid headers, misalignment or any other grid header behavior or appearance anomaly without removing this CSS first. This goes for all browsers.