function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
cambartcambart 

pageBlockSection Column Width

I am creating a visualforce page that needs to display a block section with 4 equal width columns.  The issue I have is figuring out how to define each of the columns so they are the same width (the last two columns are much smaller compared to the first three).

 

Here is my code:

<apex:page standardController="Product_Brief__c">

    <apex:pageBlock >
        <apex:pageBlockSection columns="4">
            <apex:pageblocksectionItem ><b><center> Type 1 </center></b></apex:pageblocksectionItem>
            <apex:pageblocksectionItem ><b><center> Type 2 </center></b></apex:pageblocksectionItem>
            <apex:pageblocksectionItem ><b><center> Type 3 </center></b></apex:pageblocksectionItem>
            <apex:pageblocksectionItem ><b><center> Type 4 </center></b></apex:pageblocksectionItem>
            
            <apex:pageblocksectionItem > <apex:image url="/resource/Mix" width="100" height="100"/> </apex:pageblocksectionItem>
            <apex:pageblocksectionItem > <apex:image url="/resource/SUB1" width="100" height="100"/> </apex:pageblocksectionItem>
            <apex:pageblocksectionItem > <apex:image url="/resource/TL1" width="100" height="100"/> </apex:pageblocksectionItem>
            <apex:pageblocksectionItem > <apex:image url="/resource/SUM1" width="100" height="100"/> </apex:pageblocksectionItem>

            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes</apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ><b> 1 - 20L Labtainer</b>    BPC's are placed in 2 plastic liners and packaged into (Company Name) branded carboard totes boxes</apex:pageBlockSectionItem>
                    
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
            
        
        </apex:pageBlockSection>
          
    </apex:pageBlock> 

</apex:page>

 Thanks in advance! :-)

Best Answer chosen by Admin (Salesforce Developers) 
sfdcfoxsfdcfox

I would recommend any of pageBlockTable, dataTable, or repeat elements, or even just using unadorned HTML. There's no convenient way to style the columns in a pageBlockSection without worry of internal library changes breaking your design, and there's no real decent mechanism in place to adjust those columns. In fact, the documentation on that component does (or did, I haven't checked recently) specifically advises on not using more than 2 columns for this very reason. The CSS used for that table is optimized for tables with one or two columns (actually 2 or 4 columns, one for the label, and one for the data). I understand that you're not actually "repeating" here, and apparently that's why you chose to go with a standard pageBlockSection, but it's really not well-suited for what you're trying to accomplish here.

All Answers

sfdcfoxsfdcfox

I would recommend any of pageBlockTable, dataTable, or repeat elements, or even just using unadorned HTML. There's no convenient way to style the columns in a pageBlockSection without worry of internal library changes breaking your design, and there's no real decent mechanism in place to adjust those columns. In fact, the documentation on that component does (or did, I haven't checked recently) specifically advises on not using more than 2 columns for this very reason. The CSS used for that table is optimized for tables with one or two columns (actually 2 or 4 columns, one for the label, and one for the data). I understand that you're not actually "repeating" here, and apparently that's why you chose to go with a standard pageBlockSection, but it's really not well-suited for what you're trying to accomplish here.

This was selected as the best answer
cambartcambart

Thanks for your suggestions.  I ended up re-writting it in HTML with some CSS for the coloring and rounded edges
Ridhi AgarwalRidhi Agarwal
Hi Cambart, can you please paste your code here which is in HTML as i am facing same issue. it will be of great help. Thanks.
Sai Kethu 2Sai Kethu 2
Hi Cambart, I know this is very old post, i was just wondering if you can post that code here.