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
SushupsiSushupsi 

Arranging Visual Force Tabs in multi level.

Hi Every One,

 

:smileysad::smileysad:

 

I have a requirement to arrange visual force tabs in multiple levels, i.e.; having tab1, tab2, tab3 in one line and tab4, tab5, tab6 in next line, like the way in which the tabs are arranged in mycomputer Properties section.

 

I tried having a tabpanel within a tab but it doesnt give impressive look. Could any one show me the right approach.

Do we have any App exchange tools for having tabs or any reusable component that can be used to have page developments in tabs like this.?

 

TIA

 

-Sushupsi

Best Answer chosen by Admin (Salesforce Developers) 
SushupsiSushupsi

Hi All,

 

I have formed a solution which worked for me. With the help of CSS and Lists , i could design on html tabs in multiple lines. :smileyvery-happy: :smileyvery-happy:

 

<style>
#tabs { border-bottom: .3em solid #03c; margin: 0; padding: 0;}
 #tabs li { display:inline; border-top: .1em solid #03c; border-left: .1em solid #03c; border-right: .1em solid #03c; }
 #tabs li a { text-decoration: none; padding: 0.25em 1em; color: #000; }
 #page1 #tabs li#tab1 a, #page2 #tabs li#tab2 a, #page3 #tabs li#tab3 a, .page4 #tab4 a{
 padding: 0.25em 1em;
 background-color: #03c;
 color: #fff;
 }
</style>
<apex:form >
    <ul id="tabs">
        <li id="tab1"><apex:commandlink action="{!showtab1}" value="Tab1"></apex:commandlink></li>
        <li id="tab2"><apex:commandlink action="{!showtab2}" value="Tab2"></apex:commandlink></li>
        <li id="tab3"><apex:commandlink action="{!showtab3}" value="Tab3"></apex:commandlink></li>
        <li id="tab4"><apex:commandlink action="{!showtab4}" value="Tab4"></apex:commandlink></li>
    </ul>
            <ul id="tabs">
            <li id="tab1"><a href="BCCMails">Tab 4</a></li>
            <li id="tab2"><a href="">Tab 5</a></li>
            <li id="tab3"><a href="">Tab 6</a></li>
            <li id="tab4"><a href="">Tab 7</a></li>
    </ul>
    </apex:form>
 </apex:page>

The solution is as above. Happy coding.