I have a layoutPanel with some buttons on it and a second layout panel with some more buttons on it. The two layout panels partially overlap in position. I want to be able to hide one and have the other visible such that the visible one’s elements/widgets are clickable. How can I do this efficiently? This page is expected to be viewed on a mobile device, so efficiency is important with a significant number of such buttons/panels.
First I attempted using the built in setVisible() on the panel that should be hidden. Unfortunately, this just hides the top panel. While you no longer activate the buttons on the top panel, the top panel still prevents you from clicking the bottom panel.
Next, I tried to use the z-index using widget.getElement().getStyle().setZIndex(indexInt) along with the setVisible(false) on the panel. Here only the panel has its z-index changed, but not the buttons. So again, the bottom panel is blocked from being clicked. I would pass the z-index settings down the the children, but this results in many z-index recalculations, and I’d like to avoid any performance hit.
Lastly, I considered resizing/moving the panel. To get it out of the way. The problem here is that you then have to have the panel remember where it was or what size it was. Also, simply resizing or moving the panel can have unseen consequences.
While the last two methods can work, I’m guessing there is a more efficient and elegant approach. Any suggestions? Thank you much!
Assuming a
LayoutPanel, you should usesetWidgetVisibleto hide the widget and its layer.