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
Coffee08Coffee08 

How to resize tabs

I am working on a visualforce page and I need to figure out how to make them fit together. So here is what it looks like:
|   a   |   b   |   c   |   d   |   e   |

They all fit on there pretty well but now a is longer than the others and it is going to a second line underneath. I want to make it so there is only one line but a fits in there and the spaces on the others are adjusted accordingly. The code I have is similar to this:

<div class="row">
    <div class="col-xs-12">
     <ul id=" " class=" "> 
          <apex:outputPanel layout="none" rendered=" ">
           <li class="active">
           <a class="text-center product-option" href=" " data-toggle="tab">
           <div class="product-option-title"><b> x </b></div>
           </a>
           </li>
        </apex:outputPanel>
      <apex:outputPanel layout="none" rendered=" ">
       <li>
        <a class="text-center product-option" href="#news" data-toggle="tab">
         <div class="product-option-title"><b> y </b></div>
        </a>
       </li>
      ...
     </ul>
    </div>
</div>

Please help
MissedCallMissedCall
Posting your css code would be helpful
Coffee08Coffee08
Here is the css code for that I think:

#to-top {
                display: none;
                color: #FFF;
                position: fixed;
                bottom: 20px;
                right: 20px;
                background: #1b5f8c;
                border: 3px solid #FFF;
                border-radius: 50%;
                padding: 10px;
                box-shadow: 0 2px 2px rgba(0,0,0,0.25);
            }

but this was on the template that my VF page is using so I cannot change anything here