Position elements side by side within a single pageBlockSection column

On my VF page I need to put a textbox with another textbox right to the side of it. This seems to be impossible to do. Here is how it is set up at the moment.

            <apex:pageBlockSection collapsible="true"  columns="1" title = "3rd Map Type"  rendered="{!display3rd}">            
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="3rd Set Of Questions" for="dueDate" />
                    <apex:inputfield value="{!MapRequest__c.Due_Date__c}" id="dueDate"/>
                <apex:pageBlockSectionItem >
                    <apex:inputfield value="{!MapRequest__c.Due_Date__c}" id="dueDate2"/>

I have tried setting the columns to 2 and that puts them side by side except they are across the page from each other. I could then move them closer to each other using “left: -500px” but thats not only wrong to use -px but also if you drag the browser smaller (or run it on a smaller screen) the right side textbox eventually overtakes the left one.
I tried putting them in a < table> but even putting them in the same row it put them one below the other.


This makes the two fields the “value” part of the apex:pageBlockSectionItem and presents the fields side by side:

<apex:page standardController="Contact">
<apex:pageBlockSection columns="1">  
    <apex:inputfield value="{!Contact.Department}"/>  

        <apex:outputLabel value="Name" for="first" />
        <apex:panelGrid columns="2">
            <apex:inputfield value="{!Contact.FirstName}" id="first"/>
            <apex:inputfield value="{!Contact.Birthdate}"/>

    <apex:inputfield value="{!Contact.Title}"/>

Source : Link , Question Author : user2070057 , Answer Author : Keith C

Leave a Comment