You need to sign in to do that
Don't have an account?

Visualforce child record table
Hi,
Good day!
I need assistance with the formatting of a summary row on a child record table used in a Visualforce form.
This is the CSS code for the table
#TableInfo{width: 1000px; margin: 70px 0; } #TableInfo table{border: 1px solid #f78f1e;border-collapse: collapse;border-spacing: 0;} #TableInfo table tr th{background: #f78f1e;padding: 5px;text-align: center;color: #fff;font-size: 14px;font-weight: bold;} #TableInfo table tr td{border: 1px solid #e3e3e3;padding: 5px;text-align: center;color: #000;font-size: 12px;font-weight: bold; height:25px;} #TableInfo .WidthNormal{width: 240px;} #TableInfo .WidthSmall{width: 200px;} #TableInfo .SuperBold{font-size: 17px !important;} #TotalWeightId{text-align: right !important;padding: 0 !important;} #TotalWeightId span{padding: 11px 15px; background: #f78f1e; color: #fff !important;}
This is what the table currently looks like
http://screencast.com/t/dJgoXQBoN
This is what the table should look like, the total weight should be moved a bit to the left but there's a complication with the apex facet and HTML/CSS code
http://screencast.com/t/UCdLhbmNG8
<apex:column width="240"> <apex:facet name="header">DIMENSIONS</apex:facet> <apex:outputText value="{!boflading.Dimension__c}"/> <apex:facet name="footer"><font id="TotalWeightId"><span>TOTAL WEIGHT</span></font></apex:facet></apex:column> <apex:column width="240"> <apex:facet name="header">WEIGHT</apex:facet> <apex:outputText value="{!boflading.Weight__c}"/> <apex:facet name="footer"><apex:outputText style="font-size:17px;font-weight:bold!important;" value="{!Bill_of_Lading__c.Total_Weight__c}"/></apex:facet> </apex:column> <apex:column width="240"> <apex:facet name="header">UOM</apex:facet> <apex:outputText value="{!boflading.UOM__c}"/> <apex:facet name="footer"><font style="font-size:17px;font-weight:bold!important;">L</font></apex:facet> </apex:column>
Thanks in advance!
Regards,
Phil Dennison C. Fang
Salesforce Developer
Hi ,
change 11px and 15px to 16px 15px and try it
http://screencast.com/t/W8vcbnQ5h
Try this
Adjust the width value that is in red
Hi Avi,
I've tried that and here's what happened.
http://screencast.com/t/mZnnrk6ktUey
Here's how I entered your code.
Thanks Avi, you're always a big help.
Regards,
Pfang
Hi Avi,
Thanks for clarifying that.
Here's what it looks like at 130px.
http://screencast.com/t/U5g1MYBxRFpo
I've tried it with a lower width and here's what happened.
http://screencast.com/t/9IsHa8DqEd1H
I also have this test class for this form's extension.
This is a snippet of the extension and I'm only getting 38% coverage.
Not tested
Not tested
Not tested
Not tested
Again, any help on this would be appreciated.
#TotalWeightId div{ background: #f78f1e; color: #fff !important;}
Hi Avi,
I've made that change and this is what happened to the form.
http://screencast.com/t/4dLBJQPzRgi
Regards,
Pfang
Hi Avi,
Tried that and this is what happened.
http://screencast.com/t/XbLbVwz4