How can I position multiple Struts textfields into 4 seperate blocks in one form?

Question

I am creating a web app using Struts 2. I have several forms which have multiple textfields. I would like to position the textfields into four blocks but am having some difficulty as the struts tags do not recognize div tags and so I am unable to position with the use of CSS. I understand I can use cssClass but it seems very laborious to position each Struts textfield tag!

<div id="updateMedicalInfoForm">        
  <s:form action="editNewUser">
    <img src="images/icaremark.jpg" alt="">
    <h1>Travel <br>Companion</h1>
    <div id="spacer"></div>
    <div id="spacer2"></div>

    <div id="medInfoEdit">
    <h2>Medical Information</h2>
    <s:textfield label="Doctor Name"  name="medicalInfo.doctorName" size="20" />
    <s:textfield label="PracticeName"  name="medicalInfo.practiceName" size="20"/>
    <s:textfield label="Contact Number"  name="medicalInfo.practiceNumer" size="20"/>
    <s:textfield label="Allergies"  name="medicalInfo.allergies" size="20"/>
    <s:textfield label="Medication(s)"  name="medicalInfo.medications" size="20"/>
    </div>
    <div id="surgeryAddressEdit">
    <h2>Surgery Address</h2>

    <s:textfield label="Name / No." name="medicalInfo.address.houseName" size="20" />
    <s:textfield label="Address line 1" name="medicalInfo.address.addressLine1" size="20"/>
    <s:textfield label="Address line 2" name="medicalInfo.address.addressLine2" size="20"/>
    <s:textfield label="City" name="medicalInfo.address.City" size="20"/>
    <s:textfield label="Postcode" name="medicalInfo.address.postcode" size="20"/>
    <s:textfield label="Country" name="medicalInfo.address.country"  size="20"/>
    </div>
    <div id="emergencyContactEdit">
    <h2>Emergency Contact</h2>

    <s:textfield label="Title" name="medicalInfo.nextOfKin.title" size="20" />
    <s:textfield label="First Name" name="medicalInfo.nextOfKin.fName" size="20"/>
    <s:textfield label="Last Name" name="medicalInfo.nextOfKin.lName" size="20"/>
    <s:textfield label="Contact Number" name="medicalInfo.nextOfKin.contactNum" size="20"/>
    <s:textfield label="Email" name="medicalInfo.nextOfKin.email" size="20"/>
    <s:textfield label="Relationship" name="medicalInfo.nextOfKin.relationship" size="20"/>
    </div>
    <div id="emergencyContactAddressEdit">
    <h2>Emergency Contact Address</h2>

    <s:textfield label="House Number / Name" name="medicalInfo.nextOfKin.address.houseName" size="20" />
    <s:textfield label="Address 1" name="medicalInfo.nextOfKin.address.addressLine1" size="20"/>
    <s:textfield label="Address 2" name="medicalInfo.nextOfKin.address.addressLine2" size="20"/>
    <s:textfield label="City" name="medicalInfo.nextOfKin.address.City" size="20"/>
    <s:textfield label="Postcode" name="medicalInfo.nextOfKin.address.postcode" size="20"/>
    <s:submit name="update" id="redButton" value="%{getText('button.update')}"/>
    </div>
</s:form>

Answer 1

If you're using the default "xhtml" theme then the form tags will also emit table markup. Without knowing more about your configuration, I'd say that's your current problem. All you'd need to do is add dividing table rows.

If you're using the "simple" theme then you can move things around however you want, but you'll lose some functionality, like automatic error message placement.

Using the "css_xhtml" theme may be a more appropriate solution, but there are a couple of "gotchas", the most notable being a need to make the <br/> tag element not actually break when inside your form, but that's trivial CSS.

If you have to do this throughout your site you'd likely want to consider rolling your own theme.