Myujth

I have to create a menu with tabs; these tabs comes from an array of labels from the controller, so i can get the number of tabs actually available.

The selected tab must always contain the full label of the tab, and must be a little larger than the others; others tab can have just part of the label visible, filled with dots

(eg.: if i have 4 tabs called test1, test2, test3, test4, if the tabs are larger than the menu i will see:

test1 te... te... te...

with the test1 tab slightly larger than the others).

I actually tried with 3 different classes to be applied dynamically with ng-class (tabs are 1-5, 6-10, 11-15), and 3 classes for a selected tab, each of these with a min-width in percentage;

• truncate is a class that makes all labels filled with "..." (text-overflow: ellipsis etc)




• selected: class applied for the selected tab that makes the tab white (instead of grey) and with a different label color.

index.html:

<div class="tab-header-container">
 <div class="tab" ng-repeat="tab in tabs" 
 ng-class="
 selected: tab.label==selectedTab.label, 

 'min-tabs': tabNum <=5,
 'min-tabs-selected-tab': tabNum <=5 && tab.label==selectedTab.label, 

 'med-tabs': tabNum > 5 && tabNum <= 10,
 'med-tabs-selected-tab': tabNum > 5 && tabNum <= 10 && tab.label==selectedTab.label,

 'max-tabs': tabNum > 10,
 'max-tabs-selected-tab': tabNum > 10 && tab.label==selectedTab.label
 ">
 <div class="shadow-corrector truncate" ng-class="selected: tab.label==selectedTab.label" ng-click="onTabClick(tab)">
 capitalize 
 </div>
 </div> 
 </div>

index.css:

.min-tabs 
 min-width: 18%;


.min-tabs-selected-tab 
 min-width: 28%;


/* 6-10 tabs */
.med-tabs 
 min-width: 13%;


.med-tabs-selected-tab 
 min-width: 22%;


/* 11-15 tabs */
.max-tabs 
 min-width: 6%;


.max-tabs-selected-tab 
 min-width: 16%;

but what happens is that the title of the selected tab is not totally shown when selected.
This model should work with a maximum of 15 tabs which is actually the maximum possible number of tabs available.

What would happen is that tabs will fit the entire line - and must stay all in just one line; the selected tab slightly larger; the selected tab label must be always full shown; all tabs must fit the entire line regadless of how many they are.
I know that seems not difficult but i ran out of ideas. A help would be greatly appreciated.