Longer tab names?
I would like to make one of the tab titles longer (2 words). Sadly the 2nd word wraps and can't be seen. I tried to increase the width of the button and while it seemed to work, the next 2 tabs now overlap the first button! What code can I use to increase one or more of the tab's widths and maintain the spacing between the tabs without having them overlap? In this case I'm using the bottom example from "demo-2.html" and trying to increase the width of the first tab only. Thank you!
Hi HeatherH,
If you want to increase the width of tab buttons you also need to set a new position value for next buttons to make sure they have good positions and not overlap each others.
e.g:
in demo-2.html, you will see position classes on the tab buttons (pos-left-100, pos-left-200...) that is used to set the tab button positions. So if the the width of the first tab is 190px ("tabtile-med" class) and you increased its width to 290px. In the sesond tab button, you will see a "pos-left-200" class that is used to set position for it, if you check the class in the "tabion-css.css" file you will see it is set "left: 200px", so it will overlap the first button because the first one now has width: 290px.
To fix this issue, you need to change the left value of the second button to "left: 300px" or you can replace the "pos-left-200" by "pos-left-300" class or you can also create a new position class with any left value you want and add it to the second tab. Do the same for other tab buttons to set good positions for them.
kind regards,