function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Matthew AllenMatthew Allen 

visualforce tab issue

Hi,

I am working on a VF page with a few tabs across the top. I have got this to work, however when I use a VF page within a tab, the tabs then get in am mess and huge gaps appear between each tab?? any ideas what could effect that? Remove the VF tab and everything gets close together again.

Here is my code
 
<apex:page standardController="Group_Relationship__c" showHeader="true">
  

    <apex:pageBlock title="Action Plan">
    <apex:tabPanel switchType="client">
   
    
    
    
    <apex:tab label="Details" LabelWidth="200">
    <apex:form >
   
            
            
            <div style="float:left; width: 25%;" >
            <apex:pageBlockSection title="Details" columns="1">
                <apex:inputField value="{!Group_Relationship__c.Group_Name__c}" required="false"/>
                
                </apex:pageBlockSection>            
            </div>
            
            <div style="float:left; width: 25%;" >
            <apex:pageBlockSection title="" columns="1">
               
                <apex:inputField value="{!Group_Relationship__c.Business_Area__c}" required="false"/>
                
                </apex:pageBlockSection>            
            </div>
            
            <div style="float:left; width: 25%;" >
            <apex:pageBlockSection title="" columns="1">
               
                <apex:inputField value="{!Group_Relationship__c.Current_RAG_Status__c}" required="false"/>
               
                </apex:pageBlockSection>            
            </div>
            
            <div style="float:left; width: 25%;" >
            <apex:pageBlockSection title="" columns="1">
               
                <apex:inputField value="{!Group_Relationship__c.Comments__c}" required="false"/>
                </apex:pageBlockSection>            
            </div>
            
            <div style="float:left; width: 33.1%; margin-right: 5px;" >
                <apex:pageBlockSection title="Internal" columns="2">
                <apex:inputField value="{!Group_Relationship__c.Executive_Sponsor__c}" required="false"/>
                <apex:inputField value="{!Group_Relationship__c.Relationship_Owner__c}" required="false"/>
                </apex:pageBlockSection>            
            </div>
            
            <div style="float:left; width: 33.1%; margin-right: 5px;" >
                <apex:pageBlockSection title="External" columns="2">
                <apex:inputField value="{!Group_Relationship__c.Decision_Maker_1__c}" required="false"/>
                <apex:inputField value="{!Group_Relationship__c.Decision_Maker_2__c}" required="false"/>
                </apex:pageBlockSection>            
            </div>
            
            <div style="float:left; width: 33.2%">
                <apex:pageBlockSection title="Finance" columns="2">
                <apex:inputField value="{!Group_Relationship__c.Volume_Budget__c}" required="false"/>
                <apex:inputField value="{!Group_Relationship__c.Volume_Forecast__c}" required="false"/>
                </apex:pageBlockSection>            
            </div>
            
            <div style="float:left; width: 50%">
            <apex:pageBlockSection title="Market Share" columns="2">
                <apex:inputField value="{!Group_Relationship__c.Fleet_Size__c}" required="false"/>
                <apex:inputField value="{!Group_Relationship__c.Manheim__c}" required="false"/>
                <apex:inputField value="{!Group_Relationship__c.BCA__c}" required="false"/>
                <apex:inputField value="{!Group_Relationship__c.Aston_Barclay__c}" required="false"/>
            </apex:pageBlockSection>        
            </div>
              
  

            
             </apex:form>
             </apex:tab>
             

             <apex:tab label="Group Footprint">
             <apex:include pageName="Group_Footprint_AP"/>
             </apex:tab>
             
   
             <apex:tab label="Objectives and Meetings" LabelWidth="200">        
             <apex:relatedList list="Objectives__r"/>
             </apex:tab>
             
             <apex:tab label="Key Opportunities" LabelWidth="200">        
             <apex:relatedList list="KeyOpportunities__r"/>
             </apex:tab>
             
             <apex:tab label="Key Threats" LabelWidth="200">        
             <apex:relatedList list="KeyThreats__r"/>
             </apex:tab>
             
             
             </apex:tabPanel>

    </apex:pageBlock>
   
    
</apex:page>

 
Raj VakatiRaj Vakati
Add the css to your  code

Refer this link 

https://developer.secure.force.com/cookbook/recipe/adding-css-to-visualforce-pages

http://cassacloud.com/nice-visualforce-tabs/