Hello fellow Dojo'ers,
I have put together a simple test case of a problem I am having. Essentially I have a set of tabs that are located on the left side and are stacked vertically, using the tabPosition="left-h" parameter of a TabContainer. Everything is fine until I have more tabs than I have height of the container itself. All of the tabs are there but there is no way to view the tabs below the height of the container.
I added a set of up down arrows and i can change through every tab but once I get beyond tab 16, out of 22, I can't see that it's selected anymore.
I am hoping to add a scroll bar somewhere, possibly inside the tab container or to the left of the tabs themselves but have not had any luck getting some to work. The test case is included below and just needs to be put in an html file at the same level as Dojo, Dijit and Dojox.
Thank you in advance for any suggestions,
Alex Block
<TITLE>Test Tabs</TITLE>
<style type="text/css">@import "dijit/themes/tundra/tundra.css";</style>
<style type="text/css">@import "dojo/resources/dojo.css";</style>
<style type="text/css">
/* add padding to each contentpane inside the tab container, and scrollbar if necessary */
.dojoTabPane {
padding : 10px 10px 10px 10px;
overflow: auto;
}
.tundra .dijitAlignLeft .dijitTab {
top: 50px;
}
</style>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Form");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.form.Textarea");
dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
<div id="Tabs" jsId="Tabs" dojoType="dijit.layout.TabContainer" tabPosition="left-h" style="width:900px;height:600px">
<div id='1' dojoType='dijit.layout.ContentPane' title='Tab1' >Tab 1</div>
<div id='2' dojoType='dijit.layout.ContentPane' title='Tab2' >Tab 2</div>
<div id='3' dojoType='dijit.layout.ContentPane' title='Tab3' >Tab 3</div>
<div id='4' dojoType='dijit.layout.ContentPane' title='Tab4' >Tab 4</div>
<div id='5' dojoType='dijit.layout.ContentPane' title='Tab5' >Tab 5</div>
<div id='6' dojoType='dijit.layout.ContentPane' title='Tab6' >Tab 6</div>
<div id='7' dojoType='dijit.layout.ContentPane' title='Tab7' >Tab 7</div>
<div id='8' dojoType='dijit.layout.ContentPane' title='Tab8' >Tab 8</div>
<div id='9' dojoType='dijit.layout.ContentPane' title='Tab9' >Tab 9</div>
<div id='10' dojoType='dijit.layout.ContentPane' title='Tab10' >Tab 10</div>
<div id='11' dojoType='dijit.layout.ContentPane' title='Tab11' >Tab 11</div>
<div id='12' dojoType='dijit.layout.ContentPane' title='Tab12' >Tab 12</div>
<div id='13' dojoType='dijit.layout.ContentPane' title='Tab13' >Tab 13</div>
<div id='14' dojoType='dijit.layout.ContentPane' title='Tab14' >Tab 14</div>
<div id='15' dojoType='dijit.layout.ContentPane' title='Tab15' >Tab 15</div>
<div id='16' dojoType='dijit.layout.ContentPane' title='Tab16' >Tab 16</div>
<div id='17' dojoType='dijit.layout.ContentPane' title='Tab17' >Tab 17</div>
<div id='18' dojoType='dijit.layout.ContentPane' title='Tab18' >Tab 18</div>
<div id='19' dojoType='dijit.layout.ContentPane' title='Tab19' >Tab 19</div>
<div id='20' dojoType='dijit.layout.ContentPane' title='Tab20' >Tab 20</div>
<div id='21' dojoType='dijit.layout.ContentPane' title='Tab21' >Tab 21</div>
<div id='22' dojoType='dijit.layout.ContentPane' title='Tab22' >Tab 22</div>
</div>
<div id=change_square style="float: left; text-align: left;">
<button dojoType="dijit.form.Button" id="previous" onClick="dijit.byId('Tabs').back()">
<img id=prev_image src="./dijit/themes/tundra/images/arrowUp.gif" alt="Up"/>
</button>
<button dojoType="dijit.form.Button" id="next" onClick="dijit.byId('Tabs').forward()">
<img id=next_image src="./dijit/themes/tundra/images/arrowDown.gif" alt="Dn"/>
</button>
</div>
</body>
This problem exists on all
This problem exists on all tabs on all edges of the tabContainer -- and is a particularly difficult UI task to pull off. I'm focusing on adding overflow control for top-aligned tabs, which is the most used UI currently, but hopefully the same concept will fall into place for the left and right aligned tabs as well.
Actually top tabs wrap
Thank you dante,
The reason it was so troubling is that if I have too many tabs along the top of my page (not setup in that example) they wrap onto a second row. I was hoping that something along those lines would have happened for the left and right. Essentially my complete page is a TabContainer with the content of those tabs being another tab container (the first is left tabs the second/inside ones are top).
The only way I can think of being able to show what I need is with a tree which I really don't want to get into. I was thinking that I may be able to make the tab container some fixed size based on how many tabs are needed and that way they will all be shown with a scroll bar on the far right....hmmm
Thanks again,
Alex B.
right, the top tabs wrapping
right, the top tabs wrapping is the issue I'm trying to solve by providing arrow navigation and an optional dropdrown menu listing the available tabs. I have a working prototype, but am unhappy with the overall design. It would need much more polish as it stands.
i'm new to dojo and i'm
i'm new to dojo and i'm trying to do a custom TabContainer with exactly these functionalities (drowdown menu listing available tabs and arrow navigation) with no success...could you make your prototype available please?
No Luck
I tried playing around with sizing and nothing works really nice for what I want. I think I'm going to go and try to implement a tree which is what we had previously instead of tabs. Guess we should have tried more than 3-5 tabs originally haha.
Alright well thank you and maybe one day we can go back to tabs!
Alex
use a combination of accordions and tabs
for what it's worth... if you wanted to do something instead of a tree, have you considered possibly using 3 or 4 accordions each with 5 or 6 tabs in them? just an idea...
How to do acordions?
Neon,
That sounds like a great idea but I'm not sure how you would achieve an order like that?
AccordianContainer
Pane 1
TabContainer
Tabs 6-10
End Container
End Pane 1
Pane 2
TabContainer
Tabs 6-10
End Container
End Pane 2
Pane 3
TabContainer
Tabs 6-10
End Container
End Pane 3
End AccprdianContainer
I'm guessing that may actually work...hmm
Thanks,
Alex
TabContainer is just an
TabContainer is just an extension on StackContainer. You really only need the StackContainer the do the view-switching stuff. The rest of the API is inherited, so you could just make buttons for each page added, and place them in the AccordionPane (by subscribing to the StackContainer's -addChild topic)
Hope this helps.
Quick Question...Tab Label Size
Dante,
Offhand do you know what I'd need to do to make the tab label (part you click to select a tab) about 1/2 the height?
That at least gets be 2x as many tabs which for now would be acceptable!
Thanks,
Alex