+ Start a Discussion

Fields minimum width and diplaying them across 2 rows in a child



I'm new to salesforce so please excuse the silly questions.


My problem is this:


I have a need for a section which contains 6 assorted fields (free text and picklist), and there must be a possible 10 children for this layout. Currently I have an issue where all 6 fields sit on the same line and exceed the page width.


My Questions are:


1. Is there a minimum width for fields on a page?


2. Is there a way to make the fields display across two rows per child? I'm currently using pageBlockTable which may restrict this?






1) For the width, the same rules as a regular HTML table apply on pageBlockTable.  You can use CSS to get the required width.

2) Use breakBefore attribute of <apex:column /> to start a new row for the same record.


Hope this helps.




Thanks soof.


I was putting the width in the apex:column tag instead of containing it in the input value, swapping that around seems to have done the trick.


With regards to the breakBefore attribute (very useful), do you know how to make the header value follow the field down to the second row? At the moment the fields are displayed on two rows but the header remains at the top.


I don't believe you can 'break' the header down on to the second row.  However, there's two mechanisms I can think of...

1) Use the same header cell to have header values for both rows, and somehow indicate that to the user.

2) You could also create a completely new table for the second row and use it to have a new header... something like the following...

  <apex:column value="{cont.FirstName}" headerValue="First Name" />
  <apex:column value="{cont.LastName}" headerValue="Last Name" />
  <apex:column value="{cont.Phone}" headerValue="Phone" />

  <apex:column breakBefore="true" colspan="3">
      <apex:column value="{cont.Email}" headerValue="Email" />
      <apex:column value="{cont.Street}" headerValue="Address" />





Thanks for the suggestion, but our custom controller was rejecting it.


In the end I just limited the section to 6 columns and wrapped the header across 2 lines using a facet within the coumn section above the input value.




<apex:facetname="header">Dividend Policy </apex:facet>



The next challenge is getting those headers to be left justified instead of centre! Wish me luck.




luck, dude! :)