Question

I have a problem resolving css classes in wicket parent child pages.

I have a wicket base page (BasePage) and a child page (ChildPage) extending BasePage.

The div in BasePage is like,

<div class="container-fluid">
    <wicket:child/>
</div>  

and in ChildPage

<wicket:extend>
       <div class="sidebar">
          ..........
       </div> 
 </wicket:extend>

in my base page css I have INCLUDED a css file in which there is a css rule like

.container-fluid > .sidebar {
  float: left;
  width: 220px;
}

the div container-fluid is in BasePage and sidebar div in ChildPage. Bu the problem
is after rendering the child page, it does not find the sidebar class and the page is not showing properly. But if you put the sidebar class css in ChildPage,it works. But if I have to put all child css specifically ,it will be a messy work in future where is a lot fo child page and the css will be redundant.

any clue ?

Answer 1

The BasePage/ChildPage relationship mostly exists in Java – when the final page is rendered, it should be rendered as a single entity. For example, if you were inserting your CSS via an IHeaderContributor, it would not make a difference if it were in the ChildPage or BasePage – it would get entered at the same point.

The CSS you have is very restrictive. The > character implies a direct child (not a descendent). As Draevor indicated, Wicket inserts a lot of extra markup in Development Mode. It is generally not a good idea to mix restrictive CSS or Javascript with Wicket Components. Or, rather, be very careful about it.

I wonder, perhaps the “extra” div that is inserted by Wicket is skipped when the CSS is inserted via the child page? That doesn’t make sense, but it would be an interesting experiment.