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

Improve this question
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? Commented Aug 1, 2015 at 12:16
  • You defined 2 columns in "columns="2" " above image show more than two columns how it possible. ? Commented 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. Commented Aug 1, 2015 at 12:38
  • By the way, the default is two. If you want other number of columns, you have to specify. Commented Aug 1, 2015 at 19:31

2 Answers 2

Reset to default
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.

Improve this answer
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. Commented 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

Improve this answer
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. Commented Aug 1, 2015 at 17:47

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.