Auto Adjusting Width for each Tab of a Tabbed Panel

Question

I have a tabbed panel with 6 tabs. I'd like to set the CSS so that the width of each tab changes to auto-fit the text in that tab, so tabs with long sentences are wider, & tabs with shorter sentences are slimmer. I'd also like the maximum width of the panel to be 900px.

This is my CSS so far:

#TabbedPanels2 .TabbedPanelsContentGroup {
margin-left:auto;
margin-right:auto;
width:70%;
margin-top:105px;
max-width:900px;
}

The issue right now is that all 6 of the tabs always stay at 900px, instead of auto-adjusting down to fit the text. You can see the results here: www.shellshockeddoc.com Specifically with the tabs for "Watch" & "Screenings"

Thanks a lot in advance!

Bhojendra Rauniyar · Answer 1 · 2013-09-23T03:56:42.417

0

You should use width: 100%; max-width: 900px; and also define min-width: 0px; as you are having problem for this.

edited Sep 23 '13 at 03:56

answered Sep 23 '13 at 03:47

Bhojendra Rauniyar

83,432
35
168
231

Thanks! I just tried it & it gave me the same results as before. The tabs always seem to stay at 900px no matter what. – Scrub Brush Productions Sep 23 '13 at 03:54
Still no luck. The min-width didn't change anything. – Scrub Brush Productions Sep 23 '13 at 04:00
you have not defined max-width in your site just check that – Bhojendra Rauniyar Sep 23 '13 at 04:07
Thanks! I just made all the changes & uploaded the new CSS, but still the same results. – Scrub Brush Productions Sep 23 '13 at 04:12

score 0 · Answer 2 · answered Sep 23 '13 at 04:45

display: inline-block; will cause an element to span the width of its content rather than the width of its container. If you add display: inline-block; to both .TabbedPanelsContent and .TabbedPanelsContentGroup and then add text-align: center; to .TabbedPanels you'll get (centered) tab boxes of varying widths depending on the width of their content.

score 0 · Answer 3 · answered Sep 23 '13 at 12:27

0

remove width of tab class and add margin:0 auto;padding:3px

answered Sep 23 '13 at 12:27

Web Designer cum Promoter

1,334
14
26

Auto Adjusting Width for each Tab of a Tabbed Panel

3 Answers3