1

I am trying to get the visual force page to render labels. This is my page.

<apex:page standardController="Account" extensions="customAccountController">
    <apex:form id="formId">
   <apex:pageBlock title="New Account Wizard" id="Showmethispage">
   <apex:pageBlockSection>
       <apex:pageBlockSectionItem labelTitle="Hidden Elements">
        <apex:inputHidden id="StepOne" value="{!stepOne}"/>
       <apex:inputHidden id="StepTwo" value="{!stepTwo}"/>
      </apex:pageBlockSectionItem>
   <apex:pageBlockSectionItem>  
   <apex:outputPanel rendered="{!stepOne}">
       <apex:inputField id="accountName" label="Name of the Account" value="{!Account.Name}">
           <apex:actionSupport event="onchange" action="{!AccountPopulated}" rerender="Showmethispage"/>
       </apex:inputField>
    </apex:outputPanel>
       <apex:outputPanel title="CityName" rendered="{!stepTwo}">
       <apex:inputText label="City" id="accountCity" value="{!CityName}" />
       <apex:commandButton alt="Save" title="Save" action="{!save}"/>
    </apex:outputPanel>
       </apex:pageBlockSectionItem>
     </apex:pageBlockSection>
       </apex:pageBlock>
    </apex:form>
</apex:page>

This is how it is rendering.label missing Why are the labels missing?

Edited: So I tried the suggestion given in the answer. I put in the outputLabel tag.

   <apex:outputPanel rendered="{!stepOne}">
       <apex:outputLabel value="Account Name" for="accountName"></apex:outputLabel>
       <apex:inputField id="accountName" value="{!Account.Name}">
           <apex:actionSupport event="onchange" action="{!AccountPopulated}" rerender="Showmethispage"/>
       </apex:inputField>
    </apex:outputPanel>

Now the issue is that I have a label being displayed, but just not where I want it to.

label on top

3 Answers 3

3

To resolve the issue include your label for the pageBlockSectionItem:

<apex:pageBlockSectionItem>
    <apex:outputLabel value="Name" for="name"/>
    <apex:inputField value="{!Account.Name}" id="name"/>

    <!-- or
        <apex:outputPanel>
            <apex:inputField value="{!Account.Name}" id="name"/>
        </apex:outputPanel
    -->
</apex:pageBlockSectionItem>

Note: for attribute of <apex:outputLabel> is quite useful for keyboard navigation!


Quoting from documentation of <apex:pageBlockSection>:

A single piece of data in an <apex:pageBlockSection> that takes up one column in one row. An <apex:pageBlockSectionItem> component can include up to two child components. If no content is specified, the column is rendered as an empty space. If one child component is specified, the content spans both cells of the column. If two child components are specified, the content of the first is rendered in the left, "label" cell of the column, while the content of the second is rendered in the right, "data" cell of the column.

Note that if you include an <apex:outputField> or an <apex:inputField> component in an <apex:pageBlockSectionItem>, these components do not display with their label or custom help text as they do when they are children of an <apex:pageBlockSectionItem>.

2
  • Hmm. You're using the outputField tag and not the inputField tag.
    – abhi
    Commented Aug 23, 2017 at 15:09
  • Corrected it. inputField or outputField both works inside pageBlockSectionItem.
    – Raul
    Commented Aug 23, 2017 at 15:11
1

The basic structure should be:

<apex:page ...>
    <apex:pageBlockSection ...>
        <apex:pageBlockSectionItem ...>
            <apex:outputLabel ... />
            <apex:inputField ... />
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:page>

You need to make sure each section item contains exactly one label tag and exactly one input tag.

-1

Taking this one step further, "If one child component is specified, the content spans both cells of the column. If two child components are specified, the content of the first is rendered in the left, "label" cell of the column, while the content of the second is rendered in the right, "data" cell of the column." If you specify a second blank child component then your label should move to the left as you'd like.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .