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
Vinnie BVinnie B 

Can't get two tabs in a tabPanel to display correctly

I have a simple tabPanel that references a VF page in each tab.  It's pretty simple but the second tab always displays improperly with the tabs to the right in their own column.  This pushes the table (created by the other VF pages) to the right 'column' and scrunches it up.  Short of a picture, it looks like this when Tab 1 is selected:

  VF page with table

And this when Tab 2 is selected.

  Tabs    -  VF page with table.

Obviously, I don't want the tabs on top of my VF page, not pushing it off to the right.

The tab panel code is pretty simple:

<apex:page showHeader="true">
    .activeTab {background-color:#236FBD; color:white; background-image:none}
    .inactiveTab {background-color:lightgrey; color:black; background-image:none}

  <apex:tabPanel switchType="client" selectedTab="tab1" id="ODTabPanel"
      activeTabClass="activeTab" tabClass="activeTab" inactiveTabClass="inactiveTab">
    <apex:tab label="Program - 1" name="Program1" id="tab2">
      <apex:include pageName="OD_Display_Program2"/>

    <apex:tab label="Program - 2" name="Program2" id="tab1">
      <apex:include pageName="OD_Display_Program1"/>


The code for the VF pages called by the tabPanel is also pretty simple:

<apex:page controller="OD_Display_Program1Controller" showHeader="TRUE" standardStylesheets="TRUE" cache="FALSE">

<apex:outputPanel >
    <table width="100%" border="1" cellpadding="5%" bgcolor="CCEEEE">
         ... lots of stuff in the table



The other tab is basically the same.  It just grabs different data.  I did flip the two around and the problem remains with the VF page called by the second tab.

Any ideas as to why the page won't display correctly?  Thanks!!
PrasanntaPrasannta (Salesforce Developers) 

Please refer to this link below-

Hope it helps.