ListGrid setWrapCells and padding

[jclaxton]

Hello,

I'm trying to use ListGrid cell wrapping along with some CSS to indent the whole paragraph. This works fine in Internet Explorer, but in Chrome, the padding can cause the text to overflow to right and get cut off. See screenshots below.

Is this a bug with SmartGWT, or one with Chrome? Is there another method to set padding for a cell that won't interfere with wrapping?

Thanks,
John

SmartClient Version: v12.0p_2018-04-03/LGPL Development Only (built 2018-04-03)

Chrome:


IE (desired behavior):


Style of the <td>:

[Isomorphic]

We don't have your code, so we can't tell where the problem is. If it's as easy to reproduce as just adding your settings and padding to any grid, please demonstrate this by modifying a sample, and we can take a look.

[jclaxton]

Here's a test case.

[Isomorphic]

A couple of problems in this test case:
1. It mixes GWT and SmartGWT widgets. Try using just SmartGWT widgets

2. It's using getCellCSSText() to apply left padding. Can you
try with a fixed CSS style? Other approaches like an extra element of fixed width inserted via a formatted may also be better (the ListGrid already works around dozens of browser bugs and you may have hit yet another)

[jclaxton]

I removed the GWT components and still see the issue (attached).

I don't understand why 2 is a problem. I need to use getCellCSSText() because the padding is a user-defined format that varies by cell. I don't think adding another element will work, either, since it would require using record components, which are incompatible with other features we're using (frozen fields and auto-fit row heights).

[Isomorphic]

We see the issue you mention when we add a bit more text to the first cell - we don't see it with just "Integration/Interface Configuration". We're looking into a solution now.

[Isomorphic]

The approach of your sample code doesn't work in Chrome, Firefox, and other browsers because we write out an inner <div> inside each table element (<td>) on those browsers, and the result of getCellCSSText() is written into the table element, so that the entire inner <div> is shifted over by your styling. Since we write an explicit width into that inner <div>, it and its content then get clipped by the cell to the right.

Parsing the CSS you return to extract padding and then incorporating that into our width calculations on the fly really isn't feasible, so we'd suggest instead using a CellFormatter.

So in your sample code, remove the override of ListGrid.getCellCSSText() in the anonymous class, and instead use a CellFormatter to add a <div> around the content you want to indent, styled appropriately. For cells where you don't want to indent, just return the default formatting for that field:

frozenField.setCellFormatter(new CellFormatter() {
    public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
        if (rowNum == 0) {
            return "<div style='padding-left: 45px;'>" + value + "</span>";
        }
        return grid.getDefaultFormattedValue(record, rowNum, colNum);
    }
});

(You'll need to declare frozenField and grid as final in your sample code to actually compile it.)

[jclaxton]

That worked! Thanks for your help!