How to determine if a GWT element is visible?

Question

I have several divs that are shown and hidden. How can I detect on this element, it is currently displayed on the page?

The style of the element will not help, since it is the parent div in the DOM, which is hidden.

Answer 1

The height and width of the offset will be 0.

 UIObject component = ... boolean isHidden = (component.getOffsetHeight() == 0 && component.getOffsetWidth() == 0); 

Answer 2

I ran into this problem too, and I found a better solution:

For an element called an "element":

 boolean visible = UIObject.isVisible(element) && (element.getAbsoluteLeft() > 0) && (element.getAbsoluteTop() > 0); 

The static "isVisible" method in a UIObject will check for a none display and such things, while the AbsoluteLeft and AbsoluteTop checks should handle the gap. The reason I found that the last checks were necessary was because if the element is disconnected from the DOM (and therefore does not appear on the page), the GWT will still tell you that its visibility is true if its visibility is not explicitly set To false.

Note. You can replace the AbsoluteTop and AbsoluteLeft checks with a check for the width and height of the offset, as suggested by Simon, but you should also enable the isVisible check, in my opinion.

Answer 3

You might have something like this:

  public boolean isVisible(Widget w) { while (w.getElement().hasParentElement()) { if (w.isVisible()) { return true; } w = w.getParent(); } return w.isVisible(); } 

Answer 4

If this is an element, not a UIObject, the following worked for me:

 !"hidden".equals(element.getStyle().getVisibility()) && !"none".equals(element.getStyle().getDisplay()) 

I walked through the tree, so I knew that the parent elements were visible; if your case is different, you will probably need to perform the same check for all parent elements.