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
RichardR1RichardR1 

pageBlockSectionItem in pageBlockSection

Hope you're all in good health. Can anyone help how to reduce the width of the first column in my pageBlockSection VF page? There's just too much space for checkbox fields. 
<apex:page standardController="Contact" sidebar="false" >
   <apex:form >
   <apex:inlineEditSupport />
   <apex:pageBlock mode="maindetail" >
   <apex:pageBlockSection columns="4" >

         <apex:pageBlockSectionItem > <apex:outputText > <b> Hard Pref </b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > <b>Category</b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > <b>Preferences</b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem >  <apex:outputText > <b>Notes</b> &nbsp; &nbsp;&nbsp;</apex:outputText> </apex:pageBlockSectionItem>
           
        
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Handle_with_care__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > Geography </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Geographic_HWC__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Geographic_Preferences_Notes__c}" /> </apex:pageBlockSectionItem>
         
      
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Handle_with_care__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > Travel </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Travel_HWC__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.HwC_Preferences_Notes__c}" /> </apex:pageBlockSectionItem>

   </apex:pageBlockSection>
      <div align="center"> <apex:commandButton action="{!quicksave}" value="Save" /> </div>
   </apex:pageBlock>
   </apex:form>
</apex:page>

pageBlockSection
Best Answer chosen by RichardR1
David Zhu 🔥David Zhu 🔥
@Richard, you will need to set style for <apex:pageblocksectionItem > component. i.e. <apex:pageblocksectionItem  dataStyle="width:10%">
Make sure width is in % not px.
  
<apex:pageBlockSection columns="4" >

         <apex:pageBlockSectionItem  dataStyle="width:10%"> <apex:outputText > <b> Hard Pref </b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > <b>Category</b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > <b>Preferences</b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem >  <apex:outputText > <b>Notes</b> &nbsp; &nbsp;&nbsp;</apex:outputText> </apex:pageBlockSectionItem>
           
        
         <apex:pageBlockSectionItem  dataStyle="width:10%"> <apex:outputField value="{!Contact.Handle_with_care__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > Geography </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Geographic_HWC__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Geographic_Preferences_Notes__c}" /> </apex:pageBlockSectionItem>
         
      
         <apex:pageBlockSectionItem  dataStyle="width:10%"> <apex:outputField value="{!Contact.Handle_with_care__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > Travel </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Travel_HWC__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.HwC_Preferences_Notes__c}" /> </apex:pageBlockSectionItem>

   </apex:pageBlockSection>

 

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Richard,

I found the below link that has a similar issue where they used initialWidth attribute to address the issue, can you please have a look at it and check once:

>> https://developer.salesforce.com/forums/ForumsMain?id=9062I000000XyDJ

I hope this helps and in case if this does come in handy can you please choose this as the best answer so that it can be used by others in the future if others face a similar issue.

Regards,
Anutej
Prakash T 13Prakash T 13
Hello 

It looks like our team of experts can help you resolve this ticket. We have Salesforce global help-desk support and you can log a case and our Customer Success Agents will help you solve this issue. You can also speak to them on live chat. Click on the below link to contact our help-desk. Trust me it is a support service that we are offering for free!

https://jbshelpdesk.secure.force.com

Thanks,
Jarvis SFDC team
David Zhu 🔥David Zhu 🔥
@Richard, you will need to set style for <apex:pageblocksectionItem > component. i.e. <apex:pageblocksectionItem  dataStyle="width:10%">
Make sure width is in % not px.
  
<apex:pageBlockSection columns="4" >

         <apex:pageBlockSectionItem  dataStyle="width:10%"> <apex:outputText > <b> Hard Pref </b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > <b>Category</b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > <b>Preferences</b> </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem >  <apex:outputText > <b>Notes</b> &nbsp; &nbsp;&nbsp;</apex:outputText> </apex:pageBlockSectionItem>
           
        
         <apex:pageBlockSectionItem  dataStyle="width:10%"> <apex:outputField value="{!Contact.Handle_with_care__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > Geography </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Geographic_HWC__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Geographic_Preferences_Notes__c}" /> </apex:pageBlockSectionItem>
         
      
         <apex:pageBlockSectionItem  dataStyle="width:10%"> <apex:outputField value="{!Contact.Handle_with_care__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputText > Travel </apex:outputText> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.Travel_HWC__c}" /> </apex:pageBlockSectionItem>
         <apex:pageBlockSectionItem > <apex:outputField value="{!Contact.HwC_Preferences_Notes__c}" /> </apex:pageBlockSectionItem>

   </apex:pageBlockSection>

 
This was selected as the best answer
RichardR1RichardR1
Hi David, thank you!!! I had to put the style for all the cells in the same column to achieve the desired outcome.
User-added image
Does anyone know where I learn what values can be inputted for style attributes likes this "width:10%"? I don't have any coding experience except very novice on Apex.
David Zhu 🔥David Zhu 🔥
@Richard, https://www.w3schools.com/ is a place to learn css; and VF Developer Guide is for developer:
i.e https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockSectionItem.htm
Google Apex developer guide, https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_dev_guide.htm.