resizeTabs with TabPanel control [Archive]

willgillen

6 Nov 2006, 7:29 AM

I'm trying to do a simple tabpanel and have the tabs "automatically" size to fit within the tabpanel. I'm using the new .33-beta3, but I can't seem to get it to work. I want the tabs to not be able to exceed the width of the tabPanel. But when I try to build a simple model, it always stretches the tabs out beyond the width that I have set for the tabPanel....

Here's the code in the page:

<html>

<head>
<title>TabTest</title>
<link>

<style>
.tabPanel .yui-ext-tabbody {
border:1px solid #999;
border-top:none;
width: 500px;
height: 210px;
overflow:auto;
padding-top: 5px;}
.ytab-strip td{
padding-left:2px;
width: 500px;
}
</style>
</head>

<body>

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

<div> --this div is supposed to have id of 'mypanel', and class of 'tabPanel', but code markup on this forum is stripping it out.
</div>

<script>

var tabs = new YAHOO.ext.TabPanel('mypanel');
tabs.closeOnTab=true;
tabs.resizeTabs=true;

tabs.addTab('tab1', "TabOne");
tabs.addTab('tab2', "TabTwo");
tabs.addTab('tab3', "TabThree");
tabs.addTab('tab4', "TabFour");

</script>

However, when I run it, the tabs resize out of bounds of the tabpanel... Any ideas what I'm doing wrong here? Thx!

Screenshot:

http://willgillen.com/images/tab-size-problem.gif