+ Start a Discussion
Kelly KKelly K 

Trying to remove cell padding CSS question

Hi All,

I'm trying to make an added VF element to a page layout line up in our customer portal and I'm having issues.

For the CSS, I've found using inspect element that this piece of code controlls it:

.bPageBlock .detailList td.data2Col.last {
            padding: 2px 2px 2px 10px;
            text-align: left;
            width: 82%;
        }

Once I change the 10px in chrome to 2px, it aligns correctly. However, when I apply that to my visualforce code, the update doesn't stick. Does anyone know why? Any help is greatly appreciated...
User-added image

Here's my vf code:
<apex:page standardController="Account" extensions="CP_AccountExtension" >
    <style type="text/css">
        .bPageBlock .detailList td.data2Col.last {
            padding: 2px 2px 2px 2px;
            text-align: left;
            width: 82%;
        }  
        .pageBlockTable {
            font-size:11.5px;           
        }
        .pageBlockTableHeader {
            font-size:9.5px;
            border-color: white;
        }
        .bPageBlock,
        .individualPalette .bPageBlock {           
            border-bottom:0px;
            border-left:0px;
            border-right:0px;
            border-top:0px;
        }
        .bPageBlock .pbBody{
            padding:0px 0px 0px 0px;
        }

    </style>

    <apex:pageBlock id="pageBlock" rendered="{!filteredContacts.size!=0}">
        <apex:pageBlockTable id="pageBlockTable" styleclass="pageBlockTableHeader" border="0" value="{!filteredContacts}" var="Contacts" >
            <apex:column value="{!Contacts.FirstName} {!Contacts.LastName}" styleClass="pageBlockTable "><apex:facet name="header">Contact Name</apex:facet></apex:column>
            <apex:column value="{!Contacts.Title}" styleClass="pageBlockTable "/>
            <apex:column value="{!Contacts.Email}" styleClass="pageBlockTable "/>
            <apex:column value="{!Contacts.Phone_Ext__c}" styleClass="pageBlockTable "><apex:facet name="header">Phone</apex:facet></apex:column>
            <apex:column value="{!Contacts.Primary__c}" styleClass="pageBlockTable "/>
        </apex:pageBlockTable>       
    </apex:pageBlock>
</apex:page>
Daniel B ProbertDaniel B Probert
you could try updating your <apex:page to inlcude

standardStylesheets="false"

then see what happens.

dan
Kelly KKelly K
Hi Daniel,

No luck on that. The spacing is a bit persistant!
Daniel B ProbertDaniel B Probert
what about putting this in your style:

.apexp .bPageBlock.apexDefaultPageBlock .pbBody {
        margin: 0;
        }


Kelly KKelly K
No luck on that either.

As I said, in Chrome, it is the .bPageBlock .detailList .data2Col that's controlling the bit. For one reason or the other, it's not overriding.
User-added image
Daniel B ProbertDaniel B Probert
looking at your inspect you aren't actually changing the 
.bPageBlock .detailList .data2Col

you've got a .last on it?
Daniel B ProbertDaniel B Probert
so add in 

.bPageBlock .detailList .data2Col {
padding 0
}


Kelly KKelly K
I had it that way first tried it with the .last and decided to post. Realized after I posted I couldn't go back and edit it.

Here's the current iteration, still loads with 10px even though I'm attempting to override it.

<apex:page standardStylesheets="false" standardController="Account" extensions="CP_AccountExtension" >
    <style type="text/css">
        .bPageBlock .detailList data2Col {
            padding: 0;
            text-align: left;
            width: 82%;
        }  
        .pageBlockTable {
            font-size:11.5px;           
        }
        .pageBlockTableHeader {
            font-size:9.5px;
            border-color: white;
        }
        .bPageBlock,
        .individualPalette .bPageBlock {           
            border-bottom:0px;
            border-left:0px;
            border-right:0px;
            border-top:0px;
        }
        .bPageBlock .pbBody{
            padding:0px 0px 0px 0px;
        }
        .apexp .bPageBlock.apexDefaultPageBlock .pbBody {
            margin: 0;
        }
    </style>
Kelly KKelly K
Again with the typos...I tried it without the .last 1st. Then to humor myself I tried it with the .last to see if it had an effect and it didn't. I did forget to remove it before I posted with the code.
Joachim LintlJoachim Lintl
Hi, i have exactly the same issue!
Is there no solution to it?
Kelly KKelly K

I think I did get it to line up within the element, but it didn't line up with the page completely. The page is standard and the contacts module is an embedded visualforce page. For me to get those two to line up, I'd have to make the whole thing a VF page and I don't want to do that.

User-added image

My CSS & VF for the VF module is as followed - I think it's the .bPageBlock .detailList .data2Col {} that removes the padding based on the comments I left. Good luck!

<apex:page standardController="Account" extensions="CP_AccountExtension" standardStylesheets="false" >
    <style type="text/css">
        /*Override padding around the pageBlock*/
        .bPageBlock .detailList .data2Col {
            padding: 0px 0px 0px 0px;
            text-align: left;
            width: 82%;
        }
        /*Override font size for table data*/
        .pageBlockTable {
            font-size:11.5px;            
        }
        /*Override font size for table header*/
        .pageBlockTableHeader {
            font-size:9.5px;
            border-color: white;
        }
        /*Override border around pageBlock*/
        .bPageBlock, 
        .individualPalette .bPageBlock {            
            border-bottom:0px;
            border-left:0px;
            border-right:0px;
            border-top:0px;
        }
        /*Remove padding within the pageBlock*/
        .bPageBlock .pbBody{
            padding:0px 0px 0px 0px;
        }  
        /*Override the pageBlock title size*/
        .bPageBlock .pbTitle {
            vertical-align: middle;
            color: black;
            font-size: 9.5px;
            width: 30%;
            margin: 0px;
        }                      
    </style>
    <BR/>
    <apex:pageBlock id="pageBlock" title="Contacts" rendered="{!filteredContacts.size!=0}">
        <apex:pageBlockTable id="pageBlockTable" rules="rows" styleclass="pageBlockTableHeader" border="0" value="{!filteredContacts}" var="Contacts" >
            <apex:column value="{!Contacts.FirstName} {!Contacts.LastName}" styleClass="pageBlockTable "><apex:facet name="header">Contact Name</apex:facet></apex:column>
            <apex:column value="{!Contacts.Title}" styleClass="pageBlockTable "/>
            <apex:column value="{!Contacts.Email}" styleClass="pageBlockTable "/>
            <apex:column value="{!Contacts.Phone_Ext__c}" styleClass="pageBlockTable "><apex:facet name="header">Phone</apex:facet></apex:column>
            <apex:column value="{!Contacts.Primary__c}" styleClass="pageBlockTable "/>
        </apex:pageBlockTable>        
    </apex:pageBlock>
</apex:page>