You need to sign in to do that
Don't have an account?
Kelly 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...
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>
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...
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>
standardStylesheets="false"
then see what happens.
dan
No luck on that. The spacing is a bit persistant!
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.
.bPageBlock .detailList .data2Col
you've got a .last on 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>
Is there no solution to it?
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.
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!