Results 1 to 9 of 9

Thread: Help: ColumnModel - css fails in IE6

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    179

    Exclamation Help: ColumnModel - css fails in IE6

    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.

    Code:
              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!
    Attached Images Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    179

    Exclamation

    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.

    Code:
    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

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Try this - javascript uses camelCase CSS names
    Code:
    Ext.select('.x-grid-cell-text').setStyle('whiteSpace','normal');

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    179

    Default

    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'

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

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

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    179

    Default

    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


    Code:
    <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>

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    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.

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    179

    Thumbs up

    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

  9. #9
    Ext User
    Join Date
    Apr 2007
    Posts
    226

    Default Why the problem appears in simple Grids and not in Paging Grids?

    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
    Maya Lincoln
    www.processgene.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •