[OPEN-969] TreeGrid Component and IE 6/7 white-space "nowrap" Issues
[OPEN-969] TreeGrid Component and IE 6/7 white-space "nowrap" Issues
I've got a fairly complicated (to me anyway, as I'm still understanding and learning ExtJS) layout that includes a multitude of different functionalities throughout the interface. One of the pieces that we're currently using is the version 3.1 inclusion of the TreeGrid component. This component lies in the west region of the viewport used on the page. It's responsible for populating a tab panel, situated in the center region. Essentially, when any node of the TreeGrid is clicked, a new tab is loaded in the TabPanel, displaying whatever data is associated with that node (or selects the tab if it has already been created).
We're using a TreeGrid, instead of the base TreePanel, because we have additional status information that is displayed for each node, moreso than just the name of the node itself. So we needed more of the "column"-based display, rather than a simple hierarchical tree structure. Everything seems to work great, and looks as expected, both on IE 6 and FF 3.6. (Yes, sadly, we're still stuck in the olden days of IE 6. However, the example also has this issue on IE 7 as well).
The problem lies in the width of the columns, and if the data in the column is too wide for the width of the column to hold. While FF works entirely as expected (minus the text-overflow: elipsis rule, which I can ignore), IE was showing weird behavior. If the text in the column was more than the width the column could hold, the text itself disappeared. After digging around for awhile, I discovered that the text was actually wrapping down to the next line, and was hidden by the row under that row.
I dug around for a little longer, and discovered that the three key rules (overflow: hidden, white-space: nowrap, text-overflow: ellipsis) are all listed in the x-treegrid-col class in the treegrid.css file. Unfortunately, this class is called by the parent TD tags. After more searching, it appears that IE does not follow the white-space: nowrap rule when declared in a TD tag. The general consensus is to solve the problem by wrapping all the data in the TD tag with a SPAN with the rule specified in the tag.
I then modified the TreeGridNodeUI.js file, adding a SPAN around all the data inside of the TD tag, including the tree expansion icon and record icon, so that the entire column wouldn't wrap. After doing so, it appears that everything was on one line, I could shrink the column and the text wouldn't wrap, as expected, and would properly truncate with an ellipsis as well. Unfortunately, when loading the page from that point, I got some unusual behavior. In IE, neither of the icons on the row loaded any longer. And upon clicking where the expand icon would be, I get an error on Line 31627 (debug) of "this.ecNode is null or not an object". In FF, neither of the icons load either. Also, when clicking on where the expand icon would be, I don't get an error. However, instead I get the spinning loading icon, the text for that cell is italicized, and nothing happens. It just continues to try to load.
I'm guessing that throwing an additional tag into the mix is confusing the way the nodes find their parents / children nodes. Unfortunately, it appears that is supposed to be the best way to get that intended functionality in IE. I did a fair amount of searching, and I couldn't find anyone else referencing this problem. That surprised me, because I figured there would have been others using the TreeGrid, and using it with IE.
I was hoping someone had surfaced this issue before, and that someone had a quick-fix on making it work. I understand that in one of the newer releases, there was a newer type of tree with columns that was developed. Unfortunately, we don't have access to that version, and it takes a fair amount of work to upgrade to a newer version.
Thanks for any input you have, and I would be glad to post more information if necessary to help solve the problem. Thanks!
Yes, IE6 supports white-space:nowrap. Unfortunately, it doesn't support the rule if it's declared in a TD tag. It applies it just fine if it's in a SPAN tag, or a DIV tag, but not in a TD tag. That's why it was recommended elsewhere that if someone wanted the nowrap rule applied inside of a TD, to wrap the contents in the TD with a SPAN with white-space:nowrap declared.
No. When I have a <td><span>(data)</span></td>, it works as expected. The SPAN keeps all of the data within the TD tags together, and prevents wrapping. IE then properly truncates the text with an ellipsis.
However, when I wrap the data inside the SPAN tags, the TreeGrid itself breaks. It only shows the root node, and doesn't show either the elbow/end icon or the row icon. And, when clicking on the elbow/end are where the icon would be in order to expand the tree to show the children, it breaks as well. As mentioned, in IE, I get an error on Line 31627 (debug) of "this.ecNode is null or not an object". Whereas, on FF I don't get an error. Instead, FF shows the text of that node change to Italics, and the loading circle icon appears to the left of the text, as if it's trying to load something unsuccessfully, since it just stays that way from that point onward.
Other columns are in <div></div>, not in <td> directly. I've also run the official TreeGrid example in IE7 (I don't have IE6), resized columns in the attempt to see overflow/wrap problem but I was not able to reproduce it.
Does the official example work as expected at your end? Also, does the problem occur also in Ext 3.2.1, or only in 3.1?
Sorry for my delayed response, I was out for the weeekend.
The HTML markup that I see is similar to yours as well. There's a SPAN class "x-tree-node-indent" that wraps the text that is used in the cell (in your example it's "Decorate living room"). However, that is just a basic SPAN that has no class or CSS rules applied to it. I tried solving that problem by adding CSS to the parent A tag that applies to the SPAN. The example CSS I tried is as follows:
I'm not sure if the !important tags were necessary. I just included them to verify that those rules were not being superceeded by any others.
When I added that block of CSS, it worked a little bit closer to what I was expecting. Now, if the width of the cell was less than that necessary for the text, the ENTIRE block of text wraps to the next line, not just the single word separated by a white space. So adding that extra CSS to the SPAN took care of the first part. However, the main issue still was that it was forcing the entire text block to the next line before doing the text overflow truncating. So, to solve that I needed to keep it in line with the icons to the left of it in that row. And the reason why it was working in FF but not IE was because FF applies a white-space: nowrap rule in a TD tag, but IE will not.
As far as the official examples - neither work as expected. The problem occurs in the Ext 3.1 TreeGrid example, as well was the Ext 3.2 TreeGrid example. In both IE6 and IE7, when the width is smaller than the text area required, the last word is wrapped to the next line, instead of doing the whitespace: nowrap rule.
Here's an example of what I have changed in the TreeGridNodeUI.js class in order to wrap the entire structure in a SPAN to keep the entire line from wrapping. This starts on roughly line 22, in the "buf" variable:
buf = [
'<tr ext:tree-node-id="', n.id,'" class="x-tree-node-el ', a.cls, '">',
'<span style="white-space: nowrap">', //NEW LINE ADDED FOR TESTING
'</span>', //NEW LINE ADDED FOR TESTING
I have cut out the code between the SPANs from the above code because I didn't change it. You can see that I simply added a SPAN wrapping around all the data within the TD cell. This gets me as close as possible to my desired result, but now when this is added, the TreeGrid itself breaks functionality-wise, as it appears to be unable to traverse the parent/child nodes of the tree.
If everything else fails post please a self-contained simplest possible showcase that we can run/edit/debug locally.
This is just the base example of the TreeGrid component itself. With this example, you can see the issue that I'm talking about. With FF, the grid works as expected (minus the ellipsis text). When you shrink the width of the "Task" column, all of the text in that cell remains in that line, and is truncated at the edge of the cell's viewable area.
However, when you load up the example in IE 6/7, it doesn't work quite the same way. If you shrink the width of the "Task" column so that the text would overflow past the width of the cell, you can see that the last word in the cell simply disappears. This is because that word is wrapping to the next line, but you can't see it, since the height of the row is explicitly set in a CSS rule. So it simply looks like it disappears.
As stated before, I could put in a CSS block for the x-tree-node-anchor span rules (as shown in a previous post) to affct that SPAN tag that you pointed out. However when doing so, it only SPANs the text itself, and not any icons in that row. So once the width of that row is changed to be less than the required width of the text, the entire text then disappears, as the whole block of text is wrapped to the next line together, due to the white-space: nowrap rule being applied to that block as a whole now.
*Edit* - I figured this would be as good place as any to include some screenshots to show what it is that I'm running into. You can see how the entire TreeGrid looks in the "Before" photo. This is the view of the grid upon initial load. However, when I shrink the column in the "After" photo, you can see the issues:
- "Shopping" disappears from "Project: Shopping"
- "bedroom" disappears from "Paint bedroom"
- "living room" disappears from "Decorate living room"
- "screen" disappears from "Reattach screen"
- "kitchen" disappears from "Retile kitchen"
- The entire "Housewares" text disappears from the "Housewares" folder.
Hopefully this gives a better idea as to the issue that is being experienced, which is taken directly from the official example.
Last edited by MckenziS; 12 May 2010 at 7:22 AM.
Reason: Added screenshots.