function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MycodexMycodex 

embedding a visualforce page properly within a page layout - css issue

I'm trying to embed a Visualforce page within an Opportunity to display some checkboxes in a view mode. The logic is there and it works just fine, but I just can't get the thing to look like the rest of the opportunity page. 

 

Now I know what you're going to say... why didn't I use a pageblock and pageblocksection? It just doesn't look good. It looks like I have a section within a section instead of a new section on its own. Basically, all I want is the pageblocksection. Unfortunately, you need the pageblock to have a pageblocksection.

 

I tried using Salesforce's common CSS stylesheet, but couldn't figure out which class to use. Here is the visualforce, anyone willing to help out?

 

<apex:page standardController="Opportunity">
<apex:form >
    <apex:panelgrid width="100%">
       <h3>Sales Management Questionaire</h3>
    </apex:panelgrid>
    <apex:panelGrid columns="2" >
       <apex:inputcheckbox value="{!opportunity.Q1__c}" disabled="true"/>Question 1
       <apex:inputcheckbox value="{!opportunity.Q2A1__c}" disabled="true"/>Question 2
       <apex:inputcheckbox value="{!opportunity.Q2B1__c}" disabled="true"/>Question 3
       <apex:inputcheckbox value="{!opportunity.Q2C1__c}" disabled="true"/>Question 4
    </apex:panelGrid>
</apex:form>
</apex:page>
 
 
 
 
 
 


mattdarnoldmattdarnold
Try looking at the labelCol style in common.css - that should give you the style for your labels. You should also try Firebug's inspect feature to examine the page elements and the CSS styles that apply (you can even modify the CSS styles on the fly and see how it affects the page).
 
If you let me know what kind of styles you want to apply here I can take a shot at it.
 
-- Matt 


MycodexMycodex
I managed to find a nice little blog post that had CSS I used: http://ladysign-apps.com/blog/archives/63
 
Here is the full code which comes out pretty neat. Since I know exactly the height, embedding the worksheet was relatively easy (no javascript).  
 
 
<apex:page standardController="Opportunity" showHeader="False" sidebar="false" standardStylesheets="true">
<style>
body {
        font-family:‘Arial’,‘Helvetica’,sans-serif;
        font-size:75%;
        line-height: 1.6em;
        background: #F3F3EC;
        padding: 6px 20px 4px;
        margin-right: 2px;
}
 
h3 { font-size: 100%; background: #DDB929; display: block; padding: 1px; color: #fff; }

div {
        margin: 5px;
        padding: 5px;
        border: 2px Solid #eeecd1;
}
 
li{
         display: block;
         list-style-type: none;
         list-style-position: inside;
         margin: 2px 2px 2px 20px;
}
 
table {
        background: #F3F3EC;
        font-size: 12px;
        width: 100%;
}

td {
        border-bottom: 1px solid #eeecd1;
        margin: 0px 2px 0px 5px;
        width: 60%;
        padding: 0px 0px 0px 5px;
}

</style>
<apex:form style="body">
    <apex:outputPanel rendered="{!opportunity.Q1__c == TRUE}">
        <h3>Section 1</h3>
    </apex:outputPanel>
    <apex:panelGrid columns="2" rendered="{!opportunity.Q1__c == TRUE}">
        <li><b>A.</b> Question 1</li>
        <apex:inputcheckbox value="{!opportunity.Q2A1__c}" disabled="true"/>
        <li><b>B.</b> Question 2</li>
        <apex:inputcheckbox value="{!opportunity.Q2B1__c}" disabled="true"/>
    </apex:panelGrid>
    <apex:outputPanel rendered="{!opportunity.Q1__c == FALSE}">
        <h3>Section 2</h3>
    </apex:outputPanel>
    <apex:panelGrid columns="2" rendered="{!opportunity.Q1__c == FALSE}">
        <li><b>A.</b> Question 1</li>
        <apex:inputcheckbox value="{!opportunity.Q2A1__c}" disabled="true"/>
        <li><b>B.</b> Question 2</li>
        <apex:inputcheckbox value="{!opportunity.Q2B1__c}" disabled="true"/>
    </apex:panelGrid>
</apex:form>
</apex:page>