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?

Jiggerypokery

Do you have to stick to CellTable? Probably FlexTable would be more simple because you can format it with gwt and not with css. – Simone

@Simone Yes, I have to stick to Celltable. I know with flextable it's very easy. – Jiggerypokery

Waiting for solution, which will solve my problem – Jiggerypokery

Just compile your code and make it available live somehow and put link here.So that someone can firebug your css. – Hettiehetty

I just compiled and checked my demo app with your styles. It is working fine in IE 8 with proper spacing between rows (i mean with sufficient height). – Corroboration

I think it should work. Could you post us the generated HTML code for a cell? My guess is that something is telling IE that the content is "inline" and therefore ignoring the height of it. So maybe a problem coming from the cell "content" and not the celltable itself. – Oleviaolfaction

Answer 1

It Works for me :)

/** Cell height */
.mainCellTable tbody tr td{
    height: auto;
}

Jiggerypokery

Answer 2

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

Donnydonnybrook

Answer 3

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+ */
}

Jackjackadandy

do you make a CSS Reset? -> NO. Where to add box-sizing: border-box; in my celltable.css? I added this in .cellTableCell, not useful. Please clarify this – Jiggerypokery

Yes, CSS Reset. on table cell should be right. Do you have link where I can inspect your html and css? – Jackjackadandy

Answer 4

You can use

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

Evidentiary

Answer 5

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;
                                              }-*/;

Galvanic

Answer 6

use this

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

Premer

Answer 7

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.

Buffy

Answer 8

Extend AbstractCellTableBuilder and then mention height attribute of TableRow

Rodrigues

This doesn't seem to be a relevant answer – Shorthanded