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)


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=" " />
<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">
<a4j:commandLink ajaxSingle="true"
value="Forgot password" oncomplete="#{rich:component('forgotPw')}.show()" />

(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 {

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