You need to sign in to do that
Don't have an account?
Vinnie 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:
Tabs
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">
<style>
.activeTab {background-color:#236FBD; color:white; background-image:none}
.inactiveTab {background-color:lightgrey; color:black; background-image:none}
</style>
<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>
<apex:tab label="Program - 2" name="Program2" id="tab1">
<apex:include pageName="OD_Display_Program1"/>
</apex:tab>
</apex:tabPanel>
</apex:page>
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
</table>
</apex:outputPanel>
</apex:page>
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!!
Tabs
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">
<style>
.activeTab {background-color:#236FBD; color:white; background-image:none}
.inactiveTab {background-color:lightgrey; color:black; background-image:none}
</style>
<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>
<apex:tab label="Program - 2" name="Program2" id="tab1">
<apex:include pageName="OD_Display_Program1"/>
</apex:tab>
</apex:tabPanel>
</apex:page>
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
</table>
</apex:outputPanel>
</apex:page>
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!!
Please refer to this link below-
http://salesforce.stackexchange.com/questions/27282/not-able-to-use-apextabpanel-properly
Hope it helps.