+ Start a Discussion
Irene SlessIrene Sless 

Display 2 column pageblocksection without gaps

Is it possible to display a multiline select or text box on a Visualforce page in a 2 column pageblocksection, without it creating a gap in the other column? Something like a row merge for the 2nd column only. I would like to use the space effeciently - keep all the checkboxes on one side and the multi-select on the other side.
User-added image
Best Answer chosen by Irene Sless
Sumit Kumar Singh 9Sumit Kumar Singh 9
Yes, you can achive this using custom CSS and DIV.
You may have to use additional CSS to make your page more beautiful.
 
<apex:page StandardController="Testing__c" >
    <apex:form >
        <apex:pageBlock >  
             <div>
                <div style="float: left; width: 50%;">
                     Availability : <apex:inputField value="{!Testing__c.Testing1__c}"/><br/>
                     Completed : <apex:inputField value="{!Testing__c.testing_2__c}"/><br/> 
                     Availability : <apex:inputField value="{!Testing__c.Testing1__c}"/><br/>
                     Completed : <apex:inputField value="{!Testing__c.testing_2__c}"/>      
                </div>  
                <div style="float: left; width: 50%;">
                    Country : <apex:inputField value="{!Testing__c.Country__c}"/>
                </div>
            </div>
        </apex:pageBlock>
    </apex:form>
</apex:page>
The screenshot is as follows - 
Sample Screen
Please, let me know, if it helps you. Don't forget to mark the best answer, if it solves your problem.

Thanks, 
Sumit Kumar Singh
 

All Answers

Sumit Kumar Singh 9Sumit Kumar Singh 9
Yes, you can achive this using custom CSS and DIV.
You may have to use additional CSS to make your page more beautiful.
 
<apex:page StandardController="Testing__c" >
    <apex:form >
        <apex:pageBlock >  
             <div>
                <div style="float: left; width: 50%;">
                     Availability : <apex:inputField value="{!Testing__c.Testing1__c}"/><br/>
                     Completed : <apex:inputField value="{!Testing__c.testing_2__c}"/><br/> 
                     Availability : <apex:inputField value="{!Testing__c.Testing1__c}"/><br/>
                     Completed : <apex:inputField value="{!Testing__c.testing_2__c}"/>      
                </div>  
                <div style="float: left; width: 50%;">
                    Country : <apex:inputField value="{!Testing__c.Country__c}"/>
                </div>
            </div>
        </apex:pageBlock>
    </apex:form>
</apex:page>
The screenshot is as follows - 
Sample Screen
Please, let me know, if it helps you. Don't forget to mark the best answer, if it solves your problem.

Thanks, 
Sumit Kumar Singh
 
This was selected as the best answer
Irene SlessIrene Sless
Thanks Sumit
I've changed it to meet my formatting needs:
<apex:pageBlock title="Document Printing Options">
            <div>                
                <div style="float: left; width: 40%;padding-left:10%;padding-top:16px">
                    <apex:inputCheckbox id="iex" label="Exclude print of ALL Invoices" value="{!exclInvoices}" /> Exclude print of ALL Invoices<br /> 
                    <apex:inputCheckbox id="hireex" label="Exclude print of Rental (HIR) Invoices" value="{!exclInvoiceRentals}" /> Exclude print of Rental (HIR) Invoices<br />
                    <apex:inputCheckbox id="cheex" label="Exclude print of CHARGE ONLY Invoices" value="{!exclInvoiceCharges}" /> Exclude print of CHARGE ONLY Invoices<br />
                    <apex:inputCheckbox id="rlex" label="Exclude print of Rental Invoice LINES" value="{!exclInvoiceRentalLines}" /> Exclude print of Rental Invoice LINES<br />
                    <apex:inputCheckbox id="partex" label="Exclude print of Parts Invoice LINES" value="{!exclInvoiceParts}" /> Exclude print of Parts Invoice LINES
                </div>
                <div style="float: left; width: 50%;padding-top:4px">
                    <c:MultiselectPicklist leftLabel="Select Accounts to print docs for" leftOptions="{!selPrintAccounts}" rightLabel="Selected Accounts" rightOptions="{!printAccounts}" size="5" width="18em"/><br />
                    **Leave blank to select ALL the listed Accounts
                </div> 
            </div>
            <apex:pageBlockButtons location="bottom">
                <apex:commandLink action="{!PrintCCDocs}" target="_blank" style="text-decoration:none">
                    <apex:commandButton id="PrintDocs" title="Print Call Cycle Documents" value="Print Call Cycle Documents" />
                </apex:commandLink>
            </apex:pageBlockButtons>
        </apex:pageBlock>

So it now looks like this:
User-added image