Style apex:inputText as required within apex:pageBlockSectionItem

Question

I have a number of fields that I'm binding to within a pageBlockSection. In most cases I can use an inputField to get the standard Salesforce presentation.

However, one of the required fields I want to bind to isn't an SObject field. It is a property defined on an inner class of the controller.

Basic Visualforce

<apex:pageBlock id="dropBlock" mode="edit">
     <apex:pageBlockSection title="Elements" columns="1" showHeader="false">
         <!-- ... a number of other pageBlockSectionItems-->  
         <apex:pageBlockSectionItem >
             <apex:outputLabel value="Required String Property" />
             <apex:inputText value="{!innerClassInstance.innerClassField}" required="true"/>
         </apex:pageBlockSectionItem>
     </apex:pageBlockSection>
</apex:pageBlock>

Attempting to use an inputField for the default rendering results in the error message:

Save error: Could not resolve the entity from value binding '{!innerClassInstance.innerClassField}'. can only be used with SObject fields.

If I take the inputText field out of the pageBlockSectionItem and pageBlockSection I can fake it by using a couple of divs and the Salesforce styles, but then it is no longer aligned with the other fields in the pageBlockSection.

<div class="requiredInput">
    <div class="requiredBlock"></div>
    <apex:inputText value="{!innerClassInstance.innerClassField}" required="true"/>
</div>

I can't put the extra divs in the pageBlockSectionItem as I get the error:

Save error: may have no more than 2 child components

How can I add the default Salesforce required mark to an inputText within a pageBlockSectionItem?

I did see the related question Visualforce markup used to display a required password field, with field type “password”. The issue is very similar, and the like to the discussion boards is useful. This question differs slightly as I specifically want to work within a pageBlockSectionItem for presentation reasons.

Answer 1

While writing out the question I came up with one possible solution. Just enclose the inputField and the additional divs in an outputPanel.

Hopefully it helps someone else who has this requirement.

<apex:pageBlock id="dropBlock" mode="edit">
    <apex:pageBlockSection title="Elements" columns="1" showHeader="false">
        <!-- ... a number of other pageBlockSectionItems-->  
        <apex:pageBlockSectionItem >
            <apex:outputLabel value="Required String Property" />
            <apex:outputPanel layout="block" styleClass="requiredInput">
                    <div class="requiredBlock"></div>
                    <apex:inputText value="{!innerClassInstance.innerClassField}" required="true"/>
            </apex:outputPanel>
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:pageBlock>