Sequence of inputText boxes getting misaligned when page is rendered second

Question

Hi All,
I'm facing an issue where the inputText boxes on my page get's misaligned when the page is rendered second time.In my application i'm selecting a product and adding it to my cart.Then on doing checkout, for the guest users, registartion page(jspx) is rendered.When i click "cancel" button on registration page then i'm redirected to select another product and follow the same flow.But when registration page is rendered second time the sequence of inputText boxes gets changed.For example
Sequence when Page is rendered First time
FirstName
Middle Name
LastName
MobileNo
When page is rendered second time
First NAme
LastName
Mobile No
Middletname
All these textBoxes are in a <af:panelForm .
Please suggest a solution.I'm using 10g.

Answer 1

<af:regionDef var="contacts">
<af:panelForm labelWidth="16%" maxColumns="2" rows="4" width="100%"
partialTriggers="compId335 tdnothercheckbox compId333 compId328 compId349 compId334 compId355">
<af:selectOneChoice id="compId351" value="#{bindings.MM.inputValue}"
inlineStyle="width: 125px"
binding="#{typeChange.mr_msSelecOneChoice}"
rendered="true" immediate="true"
required="#{!RegistrationIdtypeChange.tdnRegPprFlag}"
label="#{messageBean['REG_MM']}">
<f:selectItems value="#{bindings.MM.items}"/>
</af:selectOneChoice>
<af:inputText id="compId335F"
label="#{messageBean['FIRST_NAME']}"
immediate="true"
inlineStyle="width: 125px" maximumLength="50"
required="#{!IdtypeChange.tdnRegPprFlag}"
value="#{bindings.FirstName.inputValue}"
validator="#{ValidationsBean.FirstNameValidator}"
binding="#{IdtypeChange.firstNameInputText}"/>
<af:inputText id="tdncompId336"
label="#{messageBean['MIDDLE_NAME']}"
inlineStyle="width: 125px" maximumLength="50"
value="#{bindings.MiddleName.inputValue}"
validator="#{umValidationsBean.MiddleNameValidator}"/>
<af:inputText id="compId337"
label="#{messageBean['LAST_NAME']}"
inlineStyle="width: 125px" maximumLength="50"
immediate="true"
required="#{!RegistrationIdtypeChange.tdnRegPprFlag}"
value="#{bindings.LastName.inputValue}"
validator="#{umValidationsBean.LastNameValidator}"
binding="#{RegistrationIdtypeChange.lastNameInputText}"/>
<af:inputText id="compId338"
label="#{messageBean['EMAIL_ADDRESS']}"
immediate="true"
inlineStyle="width: 125px" maximumLength="100"
required="#{!RegistrationIdtypeChange.tdnRegPprFlag}"
validator="#{umValidationsBean.emailValidator}"
value="#{bindings.EmailAddress.inputValue}"
binding="#{RegistrationIdtypeChange.emailInputText}"/>
<af:inputText id="compId339"
label="#{messageBean['ALTERNATE_EMAIL']}"
maximumLength="100"
validator="#{umValidationsBean.emailValidator}"
value="#{bindings.AlternateEmail.inputValue}"/>
<af:inputText id="compId343"
label="#{messageBean['MOBILE_PHONE']}"
immediate="true"
inlineStyle="width: 125px" maximumLength="10"
value="#{bindings.CellPhone.inputValue}"
required="#{!RegistrationIdtypeChange.tdnRegPprFlag}"
validator="#{ValidationsBean.MobileNoValidator}"
shortDesc="Enter 10 digit mobile number."
binding="#{RegistrationIdtypeChange.mobNoInputText}"/>
<af:inputText id="compId342"
label="#{messageBean['UM_HOME_PHONE']}"
inlineStyle="width: 125px" maximumLength="10"
value="#{bindings.HomePhone.inputValue}"
shortDesc="Enter 10 digit phone number.for e.g. 0224283738."/>
<af:inputText id="compId344"
label="#{messageBean['UM_WORK_PHONE']}"
inlineStyle="width: 125px" maximumLength="10"
value="#{bindings.WorkPhone.inputValue}"
shortDesc="Enter 10 digit phone number.for e.g. 224283738."/>
<af:selectOneChoice id="compId349"
value="#{bindings.IDType.inputValue}"
inlineStyle="width: 125px"
required="#{!RegistrationIdtypeChange.tdnRegPprFlag}"
immediate="true" autoSubmit="true"
label="#{messageBean['UM_REG_IDTYPE']}"
valueChangeListener="#{RegistrationIdtypeChange.ChangeIdType}"
binding="#{RegistrationIdtypeChange.idTypeSelecOneChoice}">
<f:selectItems value="#{bindings.IDType.items}"/>
</af:selectOneChoice>
<af:inputText id="compId3499" inlineStyle="width: 125px"
immediate="true"
binding="#{RegistrationIdtypeChange.other_Id_Type_InputText}"
value="#{bindings.OtherDocType.inputValue}"
label="#{messageBean['REG_OTHER_IDTYPE']}"
required="#{!RegistrationIdtypeChange.tdnRegPprFlag}"
partialTriggers="compId349"
rendered="#{processScope.OtherId=='true'}"></af:inputText>
<af:inputText id="compId350" immediate="true"
value="#{bindings.IDInformation.inputValue}"
inlineStyle="width: 125px"
label="#{messageBean['REG_IDINFO']}"
binding="#{RegistrationIdtypeChange.idInfoInputText}"
required="#{!RegistrationIdtypeChange.tdnRegPprFlag}">
<af:validator binding="#{bindings.IDInformation.validator}"/>
</af:inputText>
<af:selectInputDate id="compId352"
inlineStyle="width: 125px"
value="#{bindings.BirthDate.inputValue}"
label="#{messageBean['REG_BIRTHDATE']}"
required="#{!IdtypeChange.tdnRegPprFlag}"
immediate="true"
validator="#{ValidationsBean.DateofBirthValidator}"
binding="#{RegistrationIdtypeChange.dobSelectInputdate}">
<!-- <af:validator binding="#{bindings.BirthDate.validator}"/> -->
<f:convertDateTime pattern="#{bindings.BirthDate.format}"/>
</af:selectInputDate>
</af:panelForm>
<af:inputHidden id="compId348"
value="#{bindings.ContactVO1ModId.inputValue}"/>
</af:regionDef>
</jsp:root>
this is a region included in my main page Registration.jspx