An ImgButton returned from ListGrid.createRecordComponent() disappears when hovering over the row

[eschwegs]

When I wrap the ImgButton with an HLayout, it remains visible when hovering. The disappearing icon issue was observed by a customer some time after we updated to

SmartClient Version: SNAPSHOT_v12.1d_2020-02-21/PowerEdition Deployment (built 2020-02-21)

[Isomorphic]

Hi guys, we just quickly simplified the Grid Cell Widgets sample to use just an ImgButton rather than an HLayout with two ImgButtons. Everything worked as expected, no rollover issue. Can you give us information that would let us reproduce the problem?

[eschwegs]

I'll try and duplicate this is a paired down example that I can post later this week or next.

[eschwegs]

ListGrid lg = new ListGrid() {
@Override
protected Canvas createRecordComponent(final ListGridRecord listGridRecord, Integer colNum) {


if (this.getFieldName(colNum).equals("actionIcons")) {

ImgButton viewDetailImg = new ImgButton();
viewDetailImg.setHeight(16);
viewDetailImg.setWidth(16);
viewDetailImg.setSrc("[SKIN]/FileBrowser/file.png");

// Uncomment to Use this block of code and the ImgButton() stays visible when the cursor hovers over a ListGrid row.
// HLayout fileActionsLayout = new HLayout();
// fileActionsLayout.setHeight(16);
// fileActionsLayout.setWidth(16);
// fileActionsLayout.addMembers(viewDetailImg);
// return fileActionsLayout;

// return just the ImgButton() and it looks like it is getting obscured by the row's grey on hover highlighting.
return viewDetailImg;

}

return null;

}
};
lg.setShowRecordComponents(true);
lg.setShowRecordComponentsByCell(true);
lg.setData(new ListGridRecord());
ListGridField iconField = new ListGridField("actionIcons"," "); // oddly, this can't be the empty string or the name is shown in the grid
lg.setFields(iconField);

addMember(lg);

[Isomorphic]

OK, this differs from our test code only in the name of the column and the file used, which is obviously not the problem (as we mentioned, we just took a simplified version of the Grid Cell Widgets sample and that did not reproduce the problem).

You must have some other customization, perhaps you've configured a rollUnderCanvas on the grid, or perhaps you've done something weird in the skin. One thing to check is whether, on rollover, you see a request for something like file_Over.png (which would fail) - this might indicate that you've somehow turned on rollover for all ImgButtons.

Note that, while these possibilities are worth checking, no one over here even has a theory for how it could be that adding a HLayout corrects the problem. That seems like it has to be some invalid global change of framework properties, maybe something related to zIndices or an attempted "patch".

[eschwegs]

I'm out of ideas as well. We have extended the original Enterprise theme, but I changing to the virgin BlackOps theme that also shows the problem. There are no global framework property changes that I'm aware of. It has not been our practice to change things that way either. There are also no unfound 404 images for state transitions. HTML code that gets generated for the ImgButton shows no z-index attribute. I don't know anything about how that gets generated but could be the source of the issue. When I add a high valued z-index attribute, the icon appears as it should. Does the smartGWT framework manage z-index or the browser?

If I use an IButton(), it also gets a z-index value. However behaves in a way that adds state transition txt to the image name.

At this point, I've spent to much time on this and will go the route of the HLayout work around if the z-index lead is a dead end.

[eschwegs]

P.S. Maybe it would be worth while copying and pasting the code example I gave you into a layout. It seems similar to your showcase example, but may hit some sort of corner case all the same.

[Isomorphic]

Since we don't have a way to reproduce this, please take a look at what's going on in the DOM. At the moment the image disappears, what happens? Is the src attribute on the native <img> element changing? Or the zIndex on the ImgButton's outer element? Or perhaps the zIndex of the grid, or some parent of it, is changing?

If zIndex turns out to be the issue, yes the framework does manage zIndices, so the question would be whether this grid is in a modal window, or if you perhaps have some clickmask-related code involved in this grid or a parent.

Finally, is this something only one customer can reproduce, or everyone on your team? Is it browser-specific or all browsers?