ModalPanel - Header and Close box don't line up

[nbhatia]

I have added a RichFaces modal panel to my Seam application. For some reason the header and the close box don't line up - the close box appears above the header. Where can I start looking for the problem.

Here's the code for the modal panel which is included on my main page:

 <ui:define name="content">
 ...
 <h:outputLink id="testLink" value="#">
 Test...
 <rich:componentControl attachTo="testLink" event="onclick"
 for="testPanel" operation="show" />
 </h:outputLink>

 <rich:modalPanel id="testPanel" width="800" height="600">
 <f:facet name="header">
 <h:panelGroup>
 Test Panel
 </h:panelGroup>
 </f:facet>
 <f:facet name="controls">
 <h:panelGroup>
 <h:graphicImage id="hidelink" styleClass="hidelink"
 value="images/close.png" />
 <rich:componentControl attachTo="hidelink" event="onclick"
 for="testPanel" operation="hide" />
 </h:panelGroup>
 </f:facet>
 </rich:modalPanel>
 </ui:define>

My web.xml contains the following RichFaces configuration:

 <!-- RichFaces -->

 <context-param>
 <param-name>org.richfaces.SKIN</param-name>
 <param-value>classic</param-value>
 </context-param>

 <!-- Suppress spurious stylesheets -->

 <context-param>
 <param-name>org.richfaces.CONTROL_SKINNING</param-name>
 <param-value>disable</param-value>
 </context-param>

 <context-param>
 <param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>
 <param-value>disable</param-value>
 </context-param>

 <!-- Change load strategy to DEFAULT to disable sending scripts/styles as packs -->

 <context-param>
 <param-name>org.richfaces.LoadStyleStrategy</param-name>
 <param-value>ALL</param-value>
 </context-param>

 <context-param>
 <param-name>org.richfaces.LoadScriptStrategy</param-name>
 <param-value>ALL</param-value>
 </context-param>

Thanks.
Naresh

[nbhatia]

I found out that the problem was because of a style defined in my stylesheet:

table {
 margin: 1em 0 1em 0;
 ...
}

Since the modalPanel header was sitting in a table, it got pushed down by 1em!

This makes me wonder if there are any guidelines to follow when mixing richfaces styles with my own. Should I avoid setting styles for raw HTML elements?

Thanks.
Naresh

[nbelaevski]

Hello Naresh,

As you see RichFaces styling doesn't redefine all CSS propeties, so you should be careful when defining element-wide styles. It is safer to use class-based selectors.

[nbhatia]

Thanks for the guidance. I will take precautions in the future.