+ Start a Discussion
HamptonHampton 

Visualforce Display Issue

Hello:

 

I have developed the following Visualforce page but nothing is showing up. I assume its a style issues. Any help is greatly appreciated.

<apex:page standardController="CBW_Rev_Share__c" tabStyle="CBW_Rev_Share__c">
    <apex:form >
        <style>
        .tableStyle {border-collapse: collapse; border-spacing: 0px 0px; }
        .colStyle1 { width: 33.3%;text-align:right; padding-top:3px; padding-bottom:5px}
        .colStyle2 { width: 33.3%; padding-left:20px; padding-top:5px; padding-bottom:5px}
        .colStyle3 { width: 33.4%;text-align:right; padding-top:5px; padding-bottom:5px}
        .rowstyle { border-bottom-style:solid; border-bottom-width:1px;border-bottom-color:#E8E8E8 } 
            <apex:pageBlock >
                <apex:pageBlockSection showHeader="true" title="Details" columns="3" id="details">
                    <apex:panelGrid columns="3" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3" rowClasses="rowstyle">
                        <apex:outputLabel value="Tier One" styleClass="labStyle"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.Tier_One__c}" id="TierOne"/>
                        <apex:outputLabel value="Low End Tier One" styleClass="labStyle"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.Low_End_Tier_One__c}" id="LowEndTierOne"/>
                        <apex:outputLabel value="High End Tier One" styleClass="labStyle"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.High_End_Tier_One__c}" id="HighEndTierOne"/>
                    </apex:panelGrid>       
                </apex:pageBlockSection>
            </apex:pageBlock>
        </style>            
    </apex:form>
</apex:page>

 Thanks in advance,

 

Hampton

CaptainObviousCaptainObvious

Try moving the </style> tag just above the <apex:pageBlock> tag.

HamptonHampton

Thanks, that worked as far as getting the display to come up, however it is not rendering correctly. Any thoughts?

 

I am looking for one row, three columns, equal width

<apex:page standardController="CBW_Rev_Share__c" tabStyle="CBW_Rev_Share__c">
    <apex:form >
        <style>
            .tableStyle {border-collapse: collapse; border-spacing: 0px 0px; }
            .colStyle1 { width: 33.3%;text-align:right; padding-top:5px; padding-bottom:5px}
            .colStyle2 { width: 33.3%;text-align:right; padding-top:5px; padding-bottom:5px}
            .colStyle3 { width: 33.4%;text-align:right; padding-top:5px; padding-bottom:5px}
            .rowstyle { border-bottom-style:solid; border-bottom-width:1px;border-bottom-color:#E8E8E8 }
        </style>       
            <apex:pageBlock mode="display">
                <apex:pageBlockSection showHeader="true" title="Details" columns="3" id="details">
                    <apex:panelGrid columns="3" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3" rowClasses="rowstyle">
                        <apex:outputLabel value="Tier One"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.Tier_One__c}"/>
                        <apex:outputLabel value="Low End Tier One"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.Low_End_Tier_One__c}"/>
                        <apex:outputLabel value="High End Tier One"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.High_End_Tier_One__c}"/>
                    </apex:panelGrid>       
                </apex:pageBlockSection>       
            </apex:pageBlock>          
    </apex:form>
</apex:page>

 

CaptainObviousCaptainObvious

Not sure if this is what you're looking for-

 

Set the columns in the pageBlock to 1

 

Leave the columns in the panelGrid at 3

 

 

SFDC_VikashSFDC_Vikash

Hi,

 

I don't know why you are using apex:panelgrid here but if it is your requirement then you can use following code to display 1 row and 3 column :

 

<apex:pageBlock mode="display">
                <apex:pageBlockSection showHeader="true" title="Details" id="details">
                    <apex:panelGrid columns="6" border="0" styleClass="tableStyle" width="100%" columnClasses="colStyle1,colStyle2,colStyle3" rowClasses="rowstyle">
                        <apex:outputLabel value="Tier One"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.Tier_One__c}"/>
                        <apex:outputLabel value="Low End Tier One"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.Low_End_Tier_One__c}"/>
                        <apex:outputLabel value="High End Tier One"/>
                        <apex:outputField value="{!CBW_Rev_Share__c.High_End_Tier_One__c}"/>
                    </apex:panelGrid>       
                </apex:pageBlockSection>       
            </apex:pageBlock> 

  otherwise you can use :

 

<apex:pageBlock mode="display">
  <apex:pageBlockSection showHeader="true" title="Details" columns="3" id="details">    
    <apex:outputField label="Tier One" value="{!CBW_Rev_Share__c.Tier_One__c}"/>                        
    <apex:outputField label="Low End Tier One" value="{!CBW_Rev_Share__c.Low_End_Tier_One__c}"/>                        
    <apex:outputField label=" High End Tier One" value="{!CBW_Rev_Share__c.High_End_Tier_One__c}"/>
  </apex:pageBlockSection>       
</apex:pageBlock>