[CLOSED] TreeGrid UI bug in Chrome?

  1. #1

    [CLOSED] TreeGrid UI bug in Chrome?

    To reproduce simply modify the TreeGrid sample default.aspx page (...\Examples\TreePanel\Advanced\TreeGrid\Default. aspx) as follows:

    Line 52:
    It was:
    <ext:TreeGridColumn Header="Assigned To" Width="150" DataIndex="user" />
    After change:
    <ext:TreeGridColumn Header="Assigned To" Width="50" DataIndex="user" />
    I basically decreased the size of the column so the text doesn't fit the column.

    Run the app, open google chrome and expand the Project Testing node.

    The weird thing is that this behavior happens only when the last column doesn't fit the text in that column.

    The quick solution to this was to increase the size of the column to fit any text that goes into that column, but I was wondering if you have any JavaScript fix for this. In general I size the columns appropriately but because the data is entered by users there might be instances where the text does not fit (I also use tooltips for those cases).

    Could this be related to this issue?
    http://forums.ext.net/showthread.php...Columns-Layout
    Attached Thumbnails Click image for larger version. 

Name:	Capture2.PNG 
Views:	124 
Size:	21.8 KB 
ID:	3446  
    Last edited by Daniil; Nov 18, 2011 at 5:39 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Confirmed. Thanks for the report.

    The problem - width of a header column is less than a respective body column. Investigating.
  3. #3
    I've just discovered that "text-overflow: ellipsis;" doesn't work for a header in Chrome.

    Please look at the images.

    IE and FF:
    Name:  FF and IE.JPG
Views: 273
Size:  8.3 KB

    Chrome:
    Name:  Chrome.JPG
Views: 287
Size:  8.6 KB

    It causes that width misalignment, because a header div is stretched up for text.

    For example, if you set up Width="69" (minimum required width to don't stretch), you will see everything is ok.

    For now, I can suggest you to ensure header's text doesn't exceed column's width.

    Though I'm still investigating, because not sure that it's a Chrome bug - ellipsis works on simple example.
    Last edited by Daniil; Nov 16, 2011 at 5:18 PM.
  4. #4
    Here is the example demonstrating the problem. The example emulates a real situation which happens in a TreeGrid.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            .myDiv {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <table id="table1" style="table-layout: fixed;">
                <colgroup>
                    <col id="col1" />
                    <col id="col2" />
                </colgroup>
                <thead>
                    <tr>
                        <td>
                            <div class="myDiv">Text Text Text Text Text</div>
                        </td>
                        <td>
                            <div class="myDiv">Text Text Text Text Text</div>
                        </td>
                    </tr>
                </thead>
            </table>
    
            <ext:Button runat="server" Text="Set up width">
                <Listeners>
                    <Click Handler="Ext.fly('table1').dom.style.width = '100px';
                                    Ext.fly('col1').dom.style.width = '50px';
                                    Ext.fly('col2').dom.style.width = '50px';" />
                </Listeners>
            </ext:Button>
        </form>
    </body>
    </html>
  5. #5
    Quote Originally Posted by Daniil View Post
    Please look at the images.

    IE and FF:
    Attachment 3449

    Chrome:
    Attachment 3448
    The attachments don't work. I get invalid attachment.
  6. #6
    Fixed.

    Btw, we should fix it soon.
  7. #7
    The bug ticket has been created.
    https://extnet.lighthouseapp.com/pro...gs/tickets/221

    The fix has been committed to SVN, revision #3775.

    It will also be available in the upcoming 1.3 release.

    Thanks for the report.
  8. #8
    Thank you for the (very) prompt response!

Similar Threads

  1. [CLOSED] Problem Hiding/Showing TreeGrid Columns in Chrome
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 17, 2011, 2:13 PM
  2. [CLOSED] Triggers not showing in Chrome
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 15, 2011, 3:45 PM
  3. Replies: 1
    Last Post: Feb 16, 2011, 8:07 PM
  4. [CLOSED] Problem with Google Chrome.
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 30
    Last Post: Jan 02, 2011, 6:10 PM
  5. [CLOSED] TreeGrid: Header width when treegrid is flexible
    By wazige in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 06, 2010, 10:44 AM

Posting Permissions