1

In pageblock there is apex repeat of pageblock section.The items in the page block section are not aligned properly. how to fix this.![enter image description here][1]

1
  • 1
    You'd better post the relevant Visualforce. – Keith C Aug 6 '14 at 19:16
1

An option is to use <apex:panelGrid> as explained in this answer:

https://developer.salesforce.com/forums/ForumsMain?id=906F000000097NXIAY

if you set the columnClasses property of the panelGrid you can then just set the widths of each column (you'll need a column for the label and the field). e.g.

<style>
    .tableStyle {border-collapse: collapse; border-spacing: 0px 0px; }
    .colStyle1 { width: 16.5%; padding: 3px 0 5px 0;    text-align:right;}
    .colStyle2 { width: 10%;   padding: 5px 0 5px 20px;                  }
    .colStyle3 { width: 10%;   padding: 5px 0;          text-align:right;}
    .colStyle4 { width: 21%;   padding: 5px 0 5px 20px;                  }
    .colStyle5 { width: 10%;   padding: 5px 0;          text-align:right;}
    .colStyle6 { width: 32%;   padding: 5px 0 4px 20px;                  }
    .rowstyle { border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#E8E8E8 }
</style>

<apex:pageBlockSection showHeader="true" title="Allowances" columns="1" id="allowances">
    <apex:panelGrid columns="6" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3,colStyle4,colStyle5,colStyle6" rowClasses="rowstyle">
1
  • It worked. All the fields are aligned perfectly.Thank you. – vraavi Aug 6 '14 at 21:19
2

You could leverage the dataStyle or dataStyleClass attributes on the <apex:pageBlockSectionItem /> elements to coerce that column to be consistently wider.

apex:pageBlockSectionItem documentation

Your tag might look like this for that third column:

<apex:pageBlockSectionItem dataStyle="width:20%;">

This would instruct the browser that you want the "data" cell to the right (not the label cell to the left) to render as 20% of the width of the entire table that it is within. This may be too large of a percentage, so adjust as necessary.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.