-
1. Re: Spry Tabbed Panels Width
David_Powers Nov 15, 2012 10:40 AM (in response to rgreen001)The tabs in Spry Tabbed Panels don't have a specific width. They expand to accommodate the text inserted into them.
If you want to control the width of the tabs, you need to add the following properties to the .TabbedPanelsTab style rule in SpryTabbedPanels.css:
width: 100px; /* Adjust to suit */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Setting text-overflow to ellipsis will display three dots at the end of the text if it's too long to fit.
-
2. Re: Spry Tabbed Panels Width
rgreen001 Nov 15, 2012 11:15 AM (in response to David_Powers)Thank you, David.
I'm happy that the tabs don't have a fixed width and I'm happy about setting a width as you describe above.
My problem is that if I add more tabs then the tabs will wrap around to create a new row of tabs before the first row reaches the full width of the panel. The width of all the tabs in a row seem to reach approx 70% of the width of the panel before this occurs. I would like to have more tabs along the first row before they wrap around. You can see from the two images what I mean. One image shows 6 tabs that wrap around after the first 4. I would like the other two tabs to fit on the first row. Do you see what I mean about the 70% of width before they wrap onto the next row?
The other image has 13 tabs spread over 3 rows. I would like them to spread over just 2 rows by forcing more tabs on the first two rows.
Thank you again.
-
3. Re: Spry Tabbed Panels Width
David_Powers Nov 15, 2012 4:21 PM (in response to rgreen001)You would need to post a URL to your page. It's only by seeing the code and CSS in context that it's possible to determine why the tabs are wrapping that way.
-
4. Re: Spry Tabbed Panels Width
David_Powers Nov 16, 2012 3:17 AM (in response to David_Powers)I've had a look at your pages using the URLs you provided privately.
The width of the tabs is affected by the #content ul style rule that begins on line 242 of style.css. It sets the width of unordered lists in the content <div> to 75%. The tabs of a tabbed panel group are actually an unordered list, which is why your tabs are affected.
To solve the problem, either delete the width from #content ul or add this new style rule:
#content ul.TabbedPanelsTabGroup {
width: 100%;
}
This will make the tabs fit in a single line across two of your pages. The other page still has three rows of tabs (just one on the final row), but you can fix that by swapping the order of "Customer centric competitive positioning" and "Focus group interviews".
-
5. Re: Spry Tabbed Panels Width
rgreen001 Nov 19, 2012 12:51 AM (in response to David_Powers)Thank you, David.
Excellent. As always.




