0

I have this as my visualforce page code:

<apex:pageblockSection id="thepbs" columns="4">
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="{!$ObjectType.Account.Fields.Name.Label}"/>
                <apex:inputfield value="{!acc.Name}" id="accName" required="false"/>
            </apex:pageBlockSectionItem>

            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Country"/>
                <apex:inputfield value="{!acc.BillingCountry}"/>
            </apex:pageBlockSectionItem>

            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Contact Name"/>
                <apex:inputText value="{!contactName}"/>
            </apex:pageBlockSectionItem>

            <apex:pageBlockSectionItem >
                <apex:outputLabel value="{!$ObjectType.Account.Fields.Type.Label}"/>
                <apex:inputfield value="{!acc.Type}"/>
            </apex:pageBlockSectionItem>

        </apex:pageblockSection>

In my UI, it looks like this: enter image description here

I want to make the labels above the inputfields.. Can anyone please help me? Thank you very much.

I want to make it look like this: enter image description here

  • 1
    put your code, rather than posting as picture – Santanu Boral Jan 20 at 16:23
0

To achieve this you need to use table to create the UI you want

 Option 1 : 

    <apex:page  docType="html-5.0" >
     <apex:form>
        <table>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <tr>
                <td><apex:inputText></apex:inputText></td>
                <td><apex:inputText></apex:inputText></td>
                <td><apex:inputText></apex:inputText></td>
                <td><apex:inputText></apex:inputText></td>
            </tr>
         </table>   

     </apex:form>
    </apex:page>

    Option 2: Alignment wont look good 

    <apex:page  docType="html-5.0" >
        <apex:Pageblock>
            <apex:form>
                <apex:pageblocksection id="thepbs" columns="4">
                    <apex:pageblocksectionItem>
                        <apex:outputLabel style="align:left">Field One</apex:outputLabel>
                    </apex:pageblocksectionItem> 
                    <apex:pageblocksectionItem>
                        <apex:outputLabel style="align:left">Field Two</apex:outputLabel>
                    </apex:pageblocksectionItem> 
                    <apex:pageblocksectionItem>
                        <apex:outputLabel style="align:left">Field Three</apex:outputLabel>
                    </apex:pageblocksectionItem> 
                    <apex:pageblocksectionItem>
                        <apex:outputLabel style="align:left">Field Four</apex:outputLabel>
                    </apex:pageblocksectionItem> 
                </apex:pageblocksection>
                <apex:pageblocksection id="thepbs1" columns="4">
                    <apex:pageblocksectionItem>
                        <apex:inputText/>
                    </apex:pageblocksectionItem> 
                    <apex:pageblocksectionItem>
                        <apex:inputText/>
                    </apex:pageblocksectionItem>  
                    <apex:pageblocksectionItem>
                        <apex:inputText/>
                    </apex:pageblocksectionItem>  
                    <apex:pageblocksectionItem>
                        <apex:inputText/>
                    </apex:pageblocksectionItem>  
                </apex:pageblocksection>
            </apex:form>
        </apex:Pageblock>

    </apex:page>

Pageblock section render as table so you can use html table tags to create the desired UI.

  • I want to make the label and input enclosed in a pageblocksection since I have to make them group or linked together. I have this visualforce page code right here, which have rerender on apex:pageBlockSectionItem which links the label and field: <apex:pageBlockSectionItem rendered="{!settings.Type_Filter__c}"> <apex:outputLabel value="{!$ObjectType.Account.Fields.Type.Label}"/> <apex:inputfield value="{!acc.Type}"/> </apex:pageBlockSectionItem> @avijit-chakraborty – Carl Piao Jan 21 at 5:04
  • Can you put a diagram how you want to render in UI – Avijit Chakraborty Jan 21 at 5:13
  • See above image. I want to make it look like that. @avijit – Carl Piao Jan 21 at 7:33
  • You can achive any grid format using table controlling pageblock section css is sometime challenging – Avijit Chakraborty Jan 21 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.