Selected TreeItem is not displayed as selected in Firefox or Chrome when containing a widget

[dankurka]

Originally reported on Google Code with ID 3800

Found in GWT Release (e.g. 1.5.3, 1.6 RC):

1.6.4

Encountered on OS / Browser (e.g. WinXP, IE6-7, FF3):

Windows, Firefox 2.0.0.20

Detailed description (please be as specific as possible):

A TreeItem that contains any Widget (e.g. HTML) and has not been created by
addItem(String) is not displayed as selected in Firefox (in IE and Hosted
Mode everything works fine)

Shortest code snippet which demonstrates issue (please indicate where
actual result differs from expected result):

    public void onModuleLoad() {
        Tree tree = new Tree();
        RootPanel.get().add(tree);
        tree.addItem("Shows selection");
        tree.addItem(new HTML("Does not show selection"));
    }

If you click on the first node in the tree it is correctly being displayed
as selected (with a blue background). This does not work for the second node.

Reported by mail@kuester.mobi on 2009-07-03 16:27:16

[dankurka]

I have insufficient knowledge to completely understand this issue, but it appears
that at least part of the problem is a missing 'style="display: inline;"' on whatever
is the child of the div that represents the tree item (and gets the
gwt-TreeItem-selected class attached). This missing inline seems to result in the div
that represents the TreeItem to have zero width?!

In the example posted above,  

.gwt-TreeItem-selected .gwt-HTML {
    display: inline;    
}

solves the issue.

In my original case I have a HorizontalPanel which is rendered as a Table in the
TreeItems. Enforcing the "display: inline;" on that table also solves the issue even
though it results in less than optimal rendering. The blue selection background is
about two pixels too far down.

Reported by mail@kuester.mobi on 2009-07-03 17:49:02

[dankurka]

Windows XP, Firefox 3.5, doesn't show selection. IE does. GWT 1.7.1. Workaround with
display doesn't seem to be working for us.

Reported by virgo47 on 2009-11-02 14:37:46

[dankurka]

Reported by scottb+legacy@google.com on 2009-12-15 22:04:36

[dankurka]

It is strange that this issue has still not been fixed.

Normal browsers (not IE6/7) will not apply background to a DIV that only contains a
table which technically means that this DIV is empty.

Current workaround that is not ideal is to add following lines into you CSS:  

.gwt-Tree .gwt-TreeItem-selected  {
  display: table !important;
}

Reported by ciudilo on 2010-12-09 16:56:36

[dankurka]

Shame kinda. We needed simple Tree, that's why we had to came with something nicer without
any advanced functionality by our own forces. At least it shows highlighted lines.
;-)

http://code.google.com/p/salix/
With a little change in imports most simple usages of Tree are covered.

Reported by virgo47 on 2010-12-09 18:44:00

[dankurka]

I have exactly the same problem in Chrome too:

TreeItem root = new TreeItem("Root");
        root.addItem("A");
        root.addItem(new Label("B"));
        tree.addItem(root);

-> B won't be hightlited when selected.

Reported by omasseau on 2011-02-17 12:57:07

[dankurka]

.gwt-Tree .gwt-TreeItem-selected  {
  display: table !important;
}

worked for me.

Reported by omasseau on 2011-03-03 16:27:40

[dankurka]

"display: inline-block" seems to work too, and we have com.google.gwt.resources.client.CommonResources.getInlineBlockStyle()
that provides a cross-browser implementation (using "display: inline; zoom: 1" in IE,
"display: inline-block; position: relative" in other browsers)

Replacing "DOM.setStyleAttribute(contentElem, "display", "inline");" with "addStyleName(CommonResources.getInlineBlockStyle())"
in TreeItem.java should thus do the trick. If anyone has time to try this, patches
are welcome.

Reported by t.broyer on 2013-01-03 15:31:31

• Status changed: PatchesWelcome
• Labels added: Category-UI

[dankurka]

Issue 1381 has been merged into this issue.

Reported by kurka.daniel on 2013-02-21 10:11:44

[dankurka]

Reported by kurka.daniel on 2013-06-12 06:00:13

[dankurka]

I have this issue reproduced in GWT 2.5.1. Issue exists for 6 year. Does anyone read
this issue tracker?

Reported by a.andreev@ventra.ru on 2013-07-02 12:27:49

[dankurka]

I reproduced this issue in GWT 2.6.0.
Any plans on implementing the fix mentioned by t.broyer?

Reported by bziegler@washtec.de on 2014-04-30 08:07:09

[dankurka]

hmm, my workaround:

public class JustAnotherTree extends Tree{

    JustAnotherTree(){
        super();
    }

     public JustAnotherTree(Resources resources) {
         super(resources);
     }

     public JustAnotherTree(Resources resources, boolean useLeafImages) {
         super(resources,useLeafImages);
     }

    @Override
      public TreeItem addItem(Widget widget) {
        widget.getElement().setAttribute("style", "background: inherit;");
        return super.addItem(widget);
      }

}

Reported by chani.liet on 2014-09-29 20:36:29

[dankurka]

I tried to do something like:

 public static class TreeItemImplMozilla extends TreeItemImpl {
    public TreeItem addItem(Widget widget) {
      widget.getElement().setAttribute("style", "background: inherit;");
      TreeItem ret = new TreeItem(widget);
     addItem(widget);  <-- here is a problem coz it is a method of TreeItem class
      return ret;
    }
  }

Any ideas plz ?

Reported by chani.liet on 2014-12-24 21:31:49