Help: ColumnModel - css fails in IE6

[mike1993]

It seems that IE6 refuses to apply css rule to grid cells content. I need the content to wrap. Works in FF and IE7. Am I missing something?

P.S. css rules from parent window does not interfere. I disabled any "outside" to yui-ext styles for time being.

          var cm = new Ext.grid.ColumnModel([ {
              header    : "#",
              dataIndex : 'row',
              width     : 40,
              resizable : false,
              css       : 'white-space:normal;'
            },{
                header    : "Field Name",
                dataIndex : 'name',
                align     : 'left',
                autoSizeColum: true,
                css       : 'white-space:normal;'
            },{
                header    : "Description",
                dataIndex : 'desc',
                width     : 200,
                css       : 'white-space:normal; font-style: italic;',
                align     : 'left'
            },{
                header    : "Value",
                dataIndex : 'value',
                width     : 200,
                css       : 'white-space:normal;',
                align     : 'left'
            }
          ]);

Thank you!

[mike1993]

up^. really stuck w/ this one. local styles are not at fault for sure(same happens w/ no local styles removed)

I tried using
Ext.select('.x-grid-cell-text').setStyle('white-space','normal');

no result. As matter of fact I cannot achieve any change to the cell style at all using the command above. (Tried to set 'color', 'red' just for kicks - nothing happens)

When 'css' attribute is set in ColumnModel, then all styles except "wtite-space: normal" are being applied.

From Firebug->Inspect Element:
<td class="x-grid-col x-grid-td-2 x-grid-cell-1-2" tabindex="0">
<div class="x-grid-col-2 x-grid-cell-inner">
<div class="x-grid-cell-text" unselectable="on">An Area Specific Message that is based on the zipcode that provides outage information.</div>
</div>
</td>

Thanks,
mike

[tryanDLS]

Try this - javascript uses camelCase CSS names

Ext.select('.x-grid-cell-text').setStyle('whiteSpace','normal');

[mike1993]

no go :-( it looks like any forme of css rules in Ext.select('.x-grid-cell-text').setStyle(..,..) has no effect whatsoever.
And if I set .x-grid-cell-text in local css file, the anything works but 'white-space'

[tryanDLS]

Is that returning a fly element? Do you need to call setStyle on a real element?

[mike1993]

Tim,
which one do you refer to as "real" element?

I even tried to set 'id' property in ColumnModel
{
id : "myDesc",
header : "Description",
dataIndex : 'desc',
width : 200,
autoSizeColum: true,
// css : 'white-space:normal;font-style:italic;',
align : 'left'
}

and added corresponding class rule to local css file .x-grid-col-myDesc and even .x-grid-td-myDesc and to not much surprise - white-space: normal did not work in IE6

<td class="x-grid-col x-grid-td-myDesc x-grid-cell-3-2" tabindex="0">
<div class="x-grid-col-myDesc x-grid-cell-inner">
<div class="x-grid-cell-text" unselectable="on">A message that is recorded on the fly and heard by all callers entering the outage IVR program at TFCC</div>
</div>
</td>

[tryanDLS]

This is a known issue (feature?) in IE6. If you run in quirks mode it appears to emulate the buggy IE5 white-space. If you add a doctype that puts it in stardards mode, it works correctly (at least it does by adding a css entry - I didn't try to do it via JS). I tried this with the edit grid example, adding enough text to the common name column to make it wrap. The example illustrates the problem b/c it doesn't have a doctype and runs in quirks. Adding a doctype strict or transitional makes it wrap correctly.

[mike1993]

Thank you , Tim!
Fraking IE.... I do have <xml ..> preceding doctype, hence the quirk mode was employed ( I had no idea about that xml + doctype, until now)

Live for century, learn for century..

Thanks again!
mike

[maya]

Hi,

I encountered the same problem. I am running my app. in IE6.
If I open the paging grid example (paging.html) (after removing the doctype definition) the text is wrapped just fine using: css:'white-space:normal;'; but if I open the simple grid example (array-grid.html), the text is not wrapped when defining: css:'white-space:normal;'.

The problem is solved when adding: <!DOCTYPE html PUBLIC> to array-grid.html (just like you suggested).

My question is: what is the difference between the paging grid and the normal grid that makes the text wrap work in the first example without having to add the doctype definition?

(I prefer not to add this doctype definition to all pages in my app.).

Thanks,
Maya