Quantcast

Table display problems in Chrome

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Table display problems in Chrome

John Spackman-3
Hi

I'm having some problems with Table in Chrome, in that when the Table first appears the cells are all there but they appear empty.  Resizing the Chrome window does not help, but opening the Chrome Developer Tools and then navigating down through the elements will eventually make the text in the cells appear – IE this happens without interacting with the web page, just by interacting with the Chrome Debugger.

This is (so far) pretty much impossible to reproduce as a snippet - if I take out the code for the table and put it into a separate app, it works fine.

I guess this is some kind of redraw/reflow/whatsit problem but I'm struggling to force a redraw; so far I've tried toggling display = none/block that's not doing anything except hiding & displaying the divs, i.e. not forcing a redraw.

Has anyone got any ideas how to fix this?

John

------------------------------------------------------------------------------
For Developers, A Lot Can Happen In A Second.
Boundary is the first to Know...and Tell You.
Monitor Your Applications in Ultra-Fine Resolution. Try it FREE!
http://p.sf.net/sfu/Boundary-d2dvs2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Table display problems in Chrome

Derrell Lipman
On Fri, Apr 20, 2012 at 11:05, John Spackman <[hidden email]> wrote:
Hi

I'm having some problems with Table in Chrome, in that when the Table first appears the cells are all there but they appear empty.  Resizing the Chrome window does not help, but opening the Chrome Developer Tools and then navigating down through the elements will eventually make the text in the cells appear – IE this happens without interacting with the web page, just by interacting with the Chrome Debugger.

John, are you sure you don't have any references to 'console' in your code? If you do, and the debugger isn't open, then you'll get a JavaScript error (but not necessarily any indication of the error since the debugger isn't open).

Derrell


------------------------------------------------------------------------------
For Developers, A Lot Can Happen In A Second.
Boundary is the first to Know...and Tell You.
Monitor Your Applications in Ultra-Fine Resolution. Try it FREE!
http://p.sf.net/sfu/Boundary-d2dvs2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Table display problems in Chrome

John Spackman-3
Hi Derrell

Pretty sure – but the table redraws itself if I click on the table cell's DIV in the debugger; I can see before I click on it that type CSS is correct but hovering the mouse over the DIV highlights it's position as underneath the table, and once I click on the element in the debugger the div repositions itself.

I think that this is something to do with dynamically-added stylesheets not being interpreted (the table used stylesheets for cells); if I do this in the javascript console:
var sheet = qx.bom.Stylesheet.createElement(".stuff { font-weight: inherit; } ");
qx.bom.Stylesheet.addRule(sheet, ".more-stuff", "font-weight: inherit;");

The second line makes the table cells appear.

John

From: Derrell Lipman <[hidden email]>
Reply-To: qooxdoo Development <[hidden email]>
Date: Fri, 20 Apr 2012 11:21:38 -0400
To: qooxdoo Development <[hidden email]>
Subject: Re: [qooxdoo-devel] Table display problems in Chrome

On Fri, Apr 20, 2012 at 11:05, John Spackman <[hidden email]> wrote:
Hi

I'm having some problems with Table in Chrome, in that when the Table first appears the cells are all there but they appear empty.  Resizing the Chrome window does not help, but opening the Chrome Developer Tools and then navigating down through the elements will eventually make the text in the cells appear – IE this happens without interacting with the web page, just by interacting with the Chrome Debugger.

John, are you sure you don't have any references to 'console' in your code? If you do, and the debugger isn't open, then you'll get a JavaScript error (but not necessarily any indication of the error since the debugger isn't open).

Derrell

------------------------------------------------------------------------------ For Developers, A Lot Can Happen In A Second. Boundary is the first to Know...and Tell You. Monitor Your Applications in Ultra-Fine Resolution. Try it FREE! http://p.sf.net/sfu/Boundary-d2dvs2_______________________________________________ qooxdoo-devel mailing list [hidden email] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
For Developers, A Lot Can Happen In A Second.
Boundary is the first to Know...and Tell You.
Monitor Your Applications in Ultra-Fine Resolution. Try it FREE!
http://p.sf.net/sfu/Boundary-d2dvs2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Table display problems in Chrome

Derrell Lipman
On Fri, Apr 20, 2012 at 11:38, John Spackman <[hidden email]> wrote:
Hi Derrell

Pretty sure – but the table redraws itself if I click on the table cell's DIV in the debugger; I can see before I click on it that type CSS is correct but hovering the mouse over the DIV highlights it's position as underneath the table, and once I click on the element in the debugger the div repositions itself.

I think that this is something to do with dynamically-added stylesheets not being interpreted (the table used stylesheets for cells); if I do this in the javascript console:
var sheet = qx.bom.Stylesheet.createElement(".stuff { font-weight: inherit; } ");
qx.bom.Stylesheet.addRule(sheet, ".more-stuff", "font-weight: inherit;");

The second line makes the table cells appear.

I'm not sure what's causing your problem. I use Table extensively in Chrome (on Linux) and have no difficulty with it rendering everything, which would lead me to believe there is not a generic bug in the implementation. The area we discussing, though, is cell renderers, and you may be using some that I am not. Although it will obviously improperly display your data, the first thing I'd do to debug that is to get rid of all of your assignments of cell renderers, so that all cells are rendered using the default cell renderer. If that solves the problem, then put them back in one by one, until you find the guilty culprit. 

Cheers,

Derrell


------------------------------------------------------------------------------
For Developers, A Lot Can Happen In A Second.
Boundary is the first to Know...and Tell You.
Monitor Your Applications in Ultra-Fine Resolution. Try it FREE!
http://p.sf.net/sfu/Boundary-d2dvs2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Table display problems in Chrome

John Spackman-3
I use tables a lot too, and this section of the app works fine if I extract it into a standalone application, so I agree with you that it's not a bug in Qooxdoo's table implementation (this happens when only using the default cell renders).

What's happening is that Chrome is ignoring the "qooxdoo-table-cell" CSS class that is on the table cell's DIV.  

If you hover over the DIV in the debugger's "Elements" pane, it highlights where the DIV really is – in this case the cell is hidden below the table.  This is exactly the behaviour you get if you remove the qooxdoo-table-cell class from the DIV.

I've found that if qx.bom.Stylesheet.createElement uses sheet.insertRule to add a dummy rule at the start of the stylesheet, the problem is fixed.

John.

From: Derrell Lipman <[hidden email]>
Reply-To: qooxdoo Development <[hidden email]>
Date: Fri, 20 Apr 2012 11:44:54 -0400
To: qooxdoo Development <[hidden email]>
Subject: Re: [qooxdoo-devel] Table display problems in Chrome

On Fri, Apr 20, 2012 at 11:38, John Spackman <[hidden email]> wrote:
Hi Derrell

Pretty sure – but the table redraws itself if I click on the table cell's DIV in the debugger; I can see before I click on it that type CSS is correct but hovering the mouse over the DIV highlights it's position as underneath the table, and once I click on the element in the debugger the div repositions itself.

I think that this is something to do with dynamically-added stylesheets not being interpreted (the table used stylesheets for cells); if I do this in the javascript console:
var sheet = qx.bom.Stylesheet.createElement(".stuff { font-weight: inherit; } ");
qx.bom.Stylesheet.addRule(sheet, ".more-stuff", "font-weight: inherit;");

The second line makes the table cells appear.

I'm not sure what's causing your problem. I use Table extensively in Chrome (on Linux) and have no difficulty with it rendering everything, which would lead me to believe there is not a generic bug in the implementation. The area we discussing, though, is cell renderers, and you may be using some that I am not. Although it will obviously improperly display your data, the first thing I'd do to debug that is to get rid of all of your assignments of cell renderers, so that all cells are rendered using the default cell renderer. If that solves the problem, then put them back in one by one, until you find the guilty culprit. 

Cheers,

Derrell

------------------------------------------------------------------------------ For Developers, A Lot Can Happen In A Second. Boundary is the first to Know...and Tell You. Monitor Your Applications in Ultra-Fine Resolution. Try it FREE! http://p.sf.net/sfu/Boundary-d2dvs2_______________________________________________ qooxdoo-devel mailing list [hidden email] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

------------------------------------------------------------------------------
For Developers, A Lot Can Happen In A Second.
Boundary is the first to Know...and Tell You.
Monitor Your Applications in Ultra-Fine Resolution. Try it FREE!
http://p.sf.net/sfu/Boundary-d2dvs2
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Loading...