Multi-line tabs with dynamic width control
I am trying to create tabs that have 2 lines of text and still maintain dynamic widths of the tabs like I get with single line tabs. When I use obj.setClass("text", "wrap") I lose the ability to have the dynamic width sizing I get when I have a single line. All the widths become fixed. I have the height under control with obj.setStyle("height", "40px"); but I would just like to add a <br> to the tab title so I can break it where I want and have the width not be fixed so I do not waste space. Any way to do this?
Thanks for your help.
Jim V.
January 10,
Figured out a work around. Although it's not dynamic, setting the size of each tab in the style works fine. Here is the style for a 2-line tab:
/* Adjust the height to 40px to accomodate the 2nd line*/
#myTabs {width: 100%; height: 40px; color: #006666; font-size: 10pt; font-weight: bold; }
/* need this line to center a 2-line tab*/
#myTabs .aw-list-item {text-align: center;}
/*changes font color of selected tab*/
#myTabs .aw-items-selected {color: white;}
/*set the tab sizes*/
#myTabs-item-0 {width: 85px;}
#myTabs-item-1 {width: 95px;}
#myTabs-item-2 {width: 125px;}
Add this line to your script in your tab section and you are good to go:
obj.setClass("text", "wrap");
Jim V.
January 11,