0

I created a very simple VF page which displays 28 fields from a custom object. The code looks like this:

<apex:pageBlock  >
          <apex:pageBlockSection >
              <apex:pageBlockTable value="{!caseSoLst}"  var="caseSo" >        
                 <apex:column headerValue="Owner" > 
                  <apex:outputText value="{!caseSo.Case_No__r.Account.name}"  />                        
                 </apex:column>
                <!-- ....
                27 other such entries for different fields -->
              </apex:pageBlockTable>
            </apex:PageBlockSection>
       </apex:PageBlock>

However the PageBlockTable goes outside the PageBlock and it is not completely wrapped by the PageBlock background. The image below shows the output. How do I get the PageBlock to wrap around the PageBlockTable? I tried a lot of different styling combinations but none of them seem to have worked. I imagined this should be straight forward but nothing helped. Not sure what I am I missing here. Is this even possible?

enter image description here

4
  • I am not sure why this was downvoted. I have given the code, I have explained the issue clearly with a snapshot as well. Only after I couldnt find a solution I have reached out to the forum. Still wondering what did i miss? Aug 1, 2015 at 12:16
  • You defined 2 columns in "columns="2" " above image show more than two columns how it possible. ?
    – MIX DML
    Aug 1, 2015 at 12:33
  • I have removed that attribute, but still the same result as shown in the snapshot coz that does not impact the pageblock or pageblocktable. It was only added so that there some padding at the both the ends of the table. Anyway,I have removed it for now but still the pageBlock background ends before the table and the columns from the table go way beyond the page block as shown in the snapshot. Aug 1, 2015 at 12:38
  • By the way, the default is two. If you want other number of columns, you have to specify.
    – sfdcfox
    Aug 1, 2015 at 19:31

2 Answers 2

2

Tables are tables. When tables get too big in any web page, the browser will keep expanding that table vertically and horizontally right and down until all the content fits.

It's incredibly unlikely that you'll fit nearly 30 fields in a table, and have it fit inside a page block.

Fortunately, help is available. There are scripts out there, like SlickGrid that allow a table with many columns to fit within their parent container.

Scripts like this do so by allowing the table to scroll both vertically and horizontally while displaying the header row at the top of the virtual scroll area no matter how the table is scrolled (like you'd see in a spreadsheet program).

CSS alone isn't going to solve this problem. It simply doesn't have the syntax necessary to comply with the html specs and make tables behave like spreadsheets.

1
  • Thanks everyone for the assistance. from your comments I realized that pageBlock will not help to display ~30 column. Eventually I used the generated HTML code of pageBlock and updated it with the width styling such that it wrapped the entire table. SlickGrid looks good and will definitely try and use that in the next implementation. Aug 2, 2015 at 12:12
1

You'll find that it's not recommended to use PageBlockSection with more than two columns. You may be better off writing your own HTML as you'll be able to style it more precisely.

"Salesforce stylesheets are optimized for either one or two columns." (

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_pageBlockSection.htm

Source : - Source

1
  • This only applies to the columns attribute and the use of apex:column. Using a page block table is basically the same as using a normal table tag with salesforce styling. It's usually safe to use page block tables with up to about ten columns, depending on content.
    – sfdcfox
    Aug 1, 2015 at 17:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .