Question

I’m using the Google Web Toolkit (GWT) 2.1.

I have a GWT Grid (which is just an HTML table, really) that I’m using for data entry. When you click on certain elements outside of the grid, it changes the content within the grid. I’m adding/removing CSS styles to hide certain rows in the grid based on what is selected outside of the grid. The style I’m adding and removing looks like this:

.thegrid .hiderow, .thegrid .hiderow div, .thegrid .hiderow td, .thegrid .hiderow *, .thegrid .hiderow input {
    display: none;
    overflow: hidden;
    height: 0;
}

I had to do this to get IE6 to hide the rows properly. Everything works fine, except (surprise, surprise) in IE6. In IE6, the rows are hidden properly, but when the rows are supposed to be displayed again after I remove the style, the table maintains the reduced size it had when the rows were hidden. When I give the table focus by clicking on it, it then resizes the table and shows me all the rows.

Is there a way for me to make the table expand to the correct size in IE6 after I remove the “hiderow” style from the elements? I don’t want to have to give the table focus, because the focus should be on the element the user clicked outside of the table.

Answer 1

Instead of using CSS to hide rows, you can set the row visibility using JavaScript as a workaround. In GWT, this works like this:

int row = ...;
Grid table = ...;
if(shouldEnableRow(row)) {
    table.getRowFormatter().setVisible(row, true);
} else {
    table.getRowFormatter().setVisible(row, false);
}

This translates to a JavaScript call on the DOM. The assumption was that setting the visibility through CSS would have the same effect, and it does in every browser we tested, except IE6 and IE7.