The best place to *find* answers to programming/development questions, imo, however it's the *worst* place to *ask* questions (if your first question/comment doesn't get any up-rating/response, then u can't ask anymore questions--ridiculously unrealistic), but again, a great reference for *finding* answers.

My Music (Nickleus)

20120515

jsf 1.2 h:panelGrid f:facet header and footer style background color not filling width 100%

i have the following xhtml for my jsf login box:


<h:panelGrid columns="2" styleClass="login">
<f:facet name="header">
<h:outputText value=" " />
</f:facet>
<h:outputLabel for="username" value="Username" />
<h:inputText required="true" id="username" value="#{loginBean.username}" />
<h:outputLabel for="password" value="Password" />
<h:inputSecret required="true" id="password" value="#{loginBean.password}" />
<f:facet name="footer">
<h:panelGroup>
<a4j:commandLink ajaxSingle="true"
value="Forgot password" oncomplete="#{rich:component('forgotPw')}.show()" />
</h:panelGroup>
</f:facet>
</h:panelGrid>

(the Login button and Terms of use link are irrelevant here so i left out the code)

as you can see, the footer and header background color doesn't horizontally fill the entire width of the h:panelGrid:

by using chrome's debugger i found the problem:


chrome's (user agent) stylesheet has a default border-collapse: separate for table elements, so to fix this i added the following to my application's stylesheet:
#checkPassword table {
border-collapse:collapse;
}

where #checkPassword is the id of the form that encloses the h:panelGrid, i.e. collapse all table borders inside my form.

No comments:

Post a Comment