+ Start a Discussion
Christopher_Alun_LewisChristopher_Alun_Lewis 

Styling an apex:pageBlockTable with a break before description column (missing border!)

Hello Everyone,

 

I'm having a real hard time styling an apex:pageBlockTable. I have a series of four columns containing fields from a custom object, and then another field containing a long description that I position underneath the previous fields using breakbefore="true" . I am spreading this field to the whole length of the row using colspan="4". The problem is that the lines betweens the columns and rows are behaving strangely and I can find no way of altering them. My ideal result would be for the rows to be clearly identifiable as "belonging to each other", placing borders between "pairs" of rows for example.

 

To illustrate the problem, I have built up a similar example using the contact object instead of my custom object. 

 

Page Code

 

<apex:page controller="StylePageBlockTableController">
    <apex:pageBlock >
        <apex:pageBlockTable value="{!allContacts}" var="contact">
            <apex:column value="{!contact.Name}" headervalue="Full Name"/>
            <apex:column value="{!contact.Title}" headervalue="Title"/>
            <apex:column value="{!contact.Department}" headervalue="Department"/>
            <apex:column value="{!contact.Phone}" headervalue="Phone"/>
            <apex:column value="{!contact.Email}" breakBefore="true" colspan="4"/>
        </apex:pageBlockTable>
    </apex:pageBlock>         
</apex:page>
<apex:page controller="StylePageBlockTableController">
    <apex:pageBlock >
        <apex:pageBlockTable value="{!allContacts}" var="contact">
            <apex:column value="{!contact.Name}" headervalue="Full Name"/>
            <apex:column value="{!contact.Title}" headervalue="Title"/>
            <apex:column value="{!contact.Department}" headervalue="Department"/>
            <apex:column value="{!contact.Phone}" headervalue="Phone"/>
            <apex:column value="{!contact.Email}" breakBefore="true" colspan="4"/>
        </apex:pageBlockTable>
    </apex:pageBlock>         
</apex:page>

 

Controller Code

 

public class StylePageBlockTableController {
    
    public List<Contact> getAllContacts(){
        return [select Name, Title, Department, Email, Phone from Contact limit 5 ];
    }
}

 

Here is a screenshot of the table, as I have highlighted, there is a random "missing border line" that always appears (or rather doesn't) at exactly half way down the table. No matter what the size of the table, this missing line is always in the middle.

 

Problems displaying pageBlockTable

 

I have tried using style classes and the rules attribute (which seems utterly redundant and does not seem to affect anything, perhaps the new SF styling??)  amongst others. Any ideas anyone, greatly appreciated! 

StephenJacobGoldbergStephenJacobGoldberg

Chris,

 

I am not sure I am right, but I think its because you don't have a header value in the table for the email column.

Christopher_Alun_LewisChristopher_Alun_Lewis

Stephen,

 

Thanks for the quick response :)

 

unfortunately, I just tried this and it made no difference :(