How to increase cell height of GWT celltable : Issue with IE?

Question

How to increase cell height of GWT celltable ?

In mozilla firefox cell height proper(as per content) but In case of Internet explorer some part of content not displaying properly

see image

My Celltable.css is as follows:

@def selectionBorderWidth 0px;
.cellTableWidget {
    border: 1px solid red;
}

.cellTableFirstColumn {

}

.cellTableLastColumn {

}

.cellTableFooter {
    text-align: left;
    color: #4b4a4a;
    overflow: hidden;
}

.cellTableHeader { /** COLUMN HEADR TEXT */
    text-align: left;
    color: #4b4a4a;
    overflow: hidden;
    background-color: #E1E1E1;
    font-family: arial, Helvetica, sans-serif;
    font-size: 8pt;
    font-weight: bold;
    padding-left: 10px;
    height: 20px;
    border-bottom: #e6e6e6 1px solid;
    border-left: #a6a6af 0.5px solid;
    border-right: #e6e6e6 1px solid;  
    border-top: #a6a6af 0.5px solid;
}

.cellTableCell {
    overflow: hidden;
    padding-left: 10px;
    height: 20px;
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    border-bottom: #e6e6e6 1px solid;
    border-left: #a6a6af 0.5px solid;
    border-right: #e6e6e6 1px solid;  
    border-top: #a6a6af 0.5px solid;
}

.cellTableFirstColumnFooter {

}

.cellTableFirstColumnHeader {

}

.cellTableLastColumnFooter {

}

.cellTableLastColumnHeader {

}

.cellTableSortableHeader {
    cursor: pointer;
    cursor: hand;
}

.cellTableSortableHeader:hover {
    color: #6c6b6b;
}

.cellTableSortedHeaderAscending {

}

.cellTableSortedHeaderDescending {

}

.cellTableEvenRow {
    background: #ffffff;
}

.cellTableEvenRowCell {

}

.cellTableOddRow {
    background: #f8f8f8;
}

.cellTableOddRowCell {

}

.cellTableHoveredRow { /** background: #eee;*/

}

.cellTableHoveredRowCell {
    /** border: selectionBorderWidth solid #eee; */

}

.cellTableKeyboardSelectedRow {
    background: #ffc;
}

.cellTableKeyboardSelectedRowCell {

}

.cellTableSelectedRow {
    background-image: url("images/row_Highlight.jpg");
    color :   black;
    height: auto;
    overflow: auto;
}

.cellTableSelectedRowCell {

}

/**
 * The keyboard selected cell is visible over selection.
 */
.cellTableKeyboardSelectedCell {

}


@sprite .cellTableLoading {
    gwt-image: 'cellTableLoading';
    /*margin: 20px;
*/} 

What changes I need to do in css to make consistency (cell height) in all browser?

Answer 1

I think the problem may be that your CSS style for the cell has "overflow: hidden;".

.cellTableCell {
  overflow: hidden;
  ...
}

Take that away and see what happens. I think the cell and row will expand to fit the content.

There is another possible correction for cellTableRow's CSS. Row styles should be overwritten by cell styles, but GWT may be doing something under the hood to compensate for browser differences in IE. To ensure it always applies to the TDs contained in the TR, write it like this:

.cellTableRow,
.cellTableRow td {
  overflow: auto;
  ...
}