Hiding a HTML element if all its contained Wicket components are invisible

Question

I have a HTML element which is hidden if its contained Wicket component foo is invisible.

<span class="ig" wicket:enclosure="foo">
  <span class="iga">
    <span wicket:id="foo"/>
  </span>
</span>

Now I have to add a second Wicket component bar and the enclosure should only show up if foo or bar are visible. Something like this:

<span class="ig" wicket:enclosure="foo-or-bar???">
  <span class="iga">
    <span wicket:id="foo"/>
    <span wicket:id="bar"/>
  </span>
</span>

But how? One complication is, that the visibility of the components can change by AJAX events.

martin-g martin-g · Accepted Answer · 2021-01-22T12:22:02

Move the logic to your Java code!

Component foo = ...
Component bar = ...
WebMarkupContainer wrapper = new WebMarkupContainer("wrapper") {
  @Override public void onConfigure() {
    super.onConfigure();
    foo.configure();
    bar.configure();
    setVisible(foo.isVisible() && bar.isVisible());
  }
};
wrapper.add(foo);
wrapper.add(bar);
add(wrapper);


<span class="ig" wicket:id="wrapper">
  <span class="iga">
    <span wicket:id="foo"/>
    <span wicket:id="bar"/>
  </span>
</span>

P.S. I recommend you to avoid using wicket:enclosure in almost every case! There are plenty of corner cases where it breaks. You may check Wicket JIRA for examples.

Hiding a HTML element if all its contained Wicket components are invisible

1 Answers