PanelFormLayout Alignment inside panelGroupLayout

Question

Hi
Following is the code of my jsff page. It has a panelGroupLayout in the top with two panelHeaders. Each of the panel Header has a panelFormLayout inside it.
When i run this page, the panelFormLayout dont align with each other.
Please suggest a method to fix this.
Thanks in advance.
Code starts here ----
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:f="http://java.sun.com/jsf/core">
<af:panelGroupLayout id="pgl1" inlineStyle="pglCompanyProfile"
layout="scroll" halign="left" valign="middle">
<af:navigationPane id="npProfN" hint="bar"
styleClass="AFStretchWidth">
<af:commandNavigationItem text="Company Profile"
id="cniCompProfile"
selected="true"/>
<af:commandNavigationItem text="User Profile"
id="cniUserProfile"
action="UserProfile"/>
</af:navigationPane>
<af:messages id="msgs" inline="true"/>
<af:panelHeader text="Profile Information" id="phProfileInformation"
partialTriggers="soc1 cbSubmit">
<af:panelFormLayout id="pfl1">
<af:spacer id="sp1" height="10"/>
<af:inputText value="#{bindings.Name.inputValue}"
label="#{bindings.Name.hints.label}"
required="#{bindings.Name.hints.mandatory}"
columns="#{bindings.Name.hints.displayWidth}"
maximumLength="#{bindings.Name.hints.precision}"
shortDesc="#{bindings.Name.hints.tooltip}"
id="it3">
<f:validator binding="#{bindings.Name.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.Address1.inputValue}"
label="#{bindings.Address1.hints.label}"
required="#{bindings.Address1.hints.mandatory}"
columns="#{bindings.Address1.hints.displayWidth}"
maximumLength="#{bindings.Address1.hints.precision}"
shortDesc="#{bindings.Address1.hints.tooltip}"
id="it4">
<f:validator binding="#{bindings.Address1.validator}"/>
</af:inputText>
</af:panelFormLayout>
</af:panelHeader>
<af:panelHeader text="Supplier Portal Punch-in Configuration"
partialTriggers="soc1 cbSubmit" id="pb2">
<af:panelFormLayout id="pflPunchIn" partialTriggers="soc1">
<af:spacer id="sp3" height="10"/>
<af:selectOneChoice label="Supplier Portal" id="soc1"
autoSubmit="true"
inlineStyle="vertical-align:middle; text-align:center; white-space:nowrap;"
value="#{pageFlowScope.ProfilePageBean.supPortalValue}"
valuePassThru="true"
valueChangeListener="#{pageFlowScope.ProfilePageBean.supDropDown}">
<f:selectItems value="" id="si1"/>
<af:selectItem label="ISP" value="ISP" id="si2"/>
<af:selectItem label="ESP" value="ESP" id="si3"/>
</af:selectOneChoice>
<af:inputText value="#{pageFlowScope.ProfilePageBean.ispMessagingUrl}"
label="#{bindings.MessagingUrl1.hints.label}"
required="false"
columns="#{bindings.MessagingUrl1.hints.displayWidth}"
maximumLength="#{bindings.MessagingUrl1.hints.precision}"
shortDesc="#{bindings.MessagingUrl1.hints.tooltip}"
id="msgurl"
rendered="#{!pageFlowScope.ProfilePageBean.boolEsp}"
partialTriggers="soc1 cbSubmit">
<f:validator binding="#{bindings.MessagingUrl1.validator}"/>
</af:inputText>
<af:commandButton text="Test iSP URLs" id="cbTestiSP"
rendered="#{!pageFlowScope.ProfilePageBean.boolEsp}"
partialTriggers="soc1 cbSubmit"
actionListener="#{pageFlowScope.ProfilePageBean.testIspMessagingUrl}"/>
<f:facet name="footer">
<!--af:panelGroupLayout id="pgl2" layout="horizontal"
halign="end"
styleClass="AFStretchWidth"></af:panelGroupLayout-->
</f:facet>
</af:panelFormLayout>
<af:panelGroupLayout id="pg2" layout="horizontal"
halign="right">
<af:commandButton actionListener="#{bindings.Rollback.execute}"
text="Cancel" immediate="true"
id="cbCancel">
<af:resetActionListener/>
</af:commandButton>
<af:commandButton text="Submit" id="cbSubmit"
actionListener="#{pageFlowScope.ProfilePageBean.submitProfile}"></af:commandButton>
</af:panelGroupLayout>
</af:panelHeader>
</af:panelGroupLayout>
</jsp:root>

Answer 1

If you mean that the PanelFormLayouts have different label width and different field width, then use the attributes <tt>labelWidth</tt> and <tt>fieldWidth</tt> of the tag <af:panelFormLayout> to set hardcoded equal label widths and equal field widths for both panelFormLayouts.