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

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;
...
}

Answer 2

First of all, do you make a CSS Reset? Following post refers to the same problem i guess.
Why is box sizing set to border-box for tables in Firefox?
The problem could be caused from the difference between browsers in the way the handle the box-model.
Read this post for more information.
I would set box-sizing property.
IE uses the border-box, every other browser the content-box-modell.
You can define, which one should be used with the following css rule:
table {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
or
table {
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}

Answer 3

We sometimes have problems with IE breaking the layout, because the page is rendered before everything is ready. Try if assigning a dummy CSS class to some element in the DOM changes anything.
If it does, the following code might help you. It just sets some random class at the body element and resets it to force a rerendering of the page:
/**
* Force Internet Explorer 8 to render the page again without a page refresh. after the given delay of milliseconds. This
* method only works for Internet Explorer 8.
*
* #param delayInMillis delay in milliseconds
*/
public void forceIe8ToReRender(final int delayInMillis) {
// call timer to force ie8 to re-render page without page refresh
final Timer t = new Timer() {
#Override
public void run() {
doForceBrowserToReRender();
// timer should only run once
this.cancel();
}
};
t.schedule(delayInMillis);
}
/**
* Force Browser to render the page again without a page refresh
*/
private native void doForceBrowserToReRender()/*-{
var doc = $doc;
var originalClassName = doc.body.className;
doc.body.className = "foobar";
doc.body.className = originalClassName;
}-*/;

Answer 4

use this
.cellTableCell { min-height : 20px ; ..... }

Answer 5

You can use
.cellTableKeyboardSelectedRow {
background: #ffc;
height:30px !important
}

Answer 6

It Works for me :)
/** Cell height */
.mainCellTable tbody tr td{
height: auto;
}

Answer 7

Extend AbstractCellTableBuilder and then mention height attribute of TableRow

Answer 8

height is not the best solution to assign where the content text either be increased or decreased. So there are two cases to make your above example as follows.
A) Using pure CSS.
B) Using Javascript
Explanation A:
In CSS, we depend on 2 more things whether we are using DIV structure or we are using TABLE method.
A.1 Using DIV:
If we are using div structure building my page and i use line-height to vertical align the text and text-align to horizontally align the text.
A.2 Using Table:
If I am using method table, then I would like to center the text in the middle of cell. This miracle will hold true if and only if I use text vertical-align:middle and horizontal-align:center.
Note: the text should be written in tag .
CSS in body as:
I love Allah
I Love Islam
B: Using Javascript
Use min-height in the td and use vertical align and texl-align properties to center and middle the texts by x-axis and y-axis respectively.
But there is only one problem it will create a bug report in IE6, 7. because IE7, IE8 do not understand min-height. So we have IE9.js file which you download it using google. and put the script in the head of html document. Also put the latest jquery file first and then put the IE9.js script after it.
and in css enjoy min-height property and how far as your text grows, the text will automatically be in the middle of the table cells.
If you are using DIV then it is same process.
I hope this will make you something extra. And you will not need to use Google once again.