In this article I will discuss how to make your Tab Panels dynamically resize to the size of their content. I will use the doLayout property of the dijit control, exposed through the extension library control properties in XPages Designer.
Introduction
The Extension Library provides us with many easy to use Dojo “containers” including the TabContainer and TabPanel. What is sometimes difficult to decifer though is how to configure the dojo container to bend to your will and meet your requirements.
The Problem
My problem was that I have a container with multiple tabs and some are really large and some are small. The out of box the box functionality provides the ability to size the TabContainer and it forces that size on all the panels. This leaves me with two options (see the demo):
- Make all the boxes large enough to cover the largest panel
- which looks daft on the panels with very little content
- Make the overflow of the larger panels use a scroll bar
- style=”overflow-y: auto”
- This is “ok” but with a lot of scrolling it makes the panel difficult to use
The solution
So I was searching around Google and I could not find an answer to “dojo TabContainer dynamic resize” which was very frustrating – so I came upon the dojo documentation for the TabContainer. http://dojotoolkit.org/reference-guide/1.7/dijit/layout/TabContainer.html And experience has told me I am wasting my time with the Dojo documentation but I figured what the hey and clicked in……
Now I would rather stab my eyes out than read the dojo API documentation – but I have to hold my hand up and give them props for this one – it is right there in the demonstrations on the first page “A TabContainer with flexible height” – Brilliant!
The trick is to add doLayout=”false” to your dojo container – simple – and a working demonstration as well – well done sirs!!!
So then I went to the XPages designer to look and see if the property was there on the custom control – and yes it was – brilliant – and how absolutely 100% USELESS the help was for it……How is this helpful???
It would have been much more helpful to say “default=true – forces all the Tab Panels to be the same height as the TabContainer. Set to false to allow for flexible tab Panel height!”
The dojo API documentation says “If true, change the size of my currently displayed child to match my size” – written by closet programmers and not by real people, apparently.
Demo
Here is the simple demonstration of the difference – quite striking really
http://demo.xomino.com/xomino/xPlay.nsf/xTabContainer.xsp
Conclusion
Dojo reference guide actually helped………and I need to use it more often apparently.
(I still refuse to waste my time on the API documentation though)
The Moral
I think for me it is imperative to understand more about how the dojo containers work in their original environment – the CSJS library before attempting to use them in XPages. I realize this is contrary to the idea that we don’t “have” to understand them to use them in XPages – but actually – I now think it is essential
For more information check out the Dijit information – reference guide – real people speak!
http://dojotoolkit.org/reference-guide/1.7/dijit/info.html#dijit-info
Xomino 
Very nice post Marky. I quickly tested your Demo in Firefox and IE. Low and behold, the borders and alignment work better in IE9 than in Firefox 14???? That’s a first for me.
Same here, I also find it essential to know how the underlying Dojo controls work. I prefer to use them directly (in many times even without their html tags and parseOnLoad), not hidden/wrapped by Extlib code where it’s not obvious what is going on behind the scenes.
Thanks Karsten.
You know I did wonder about that as well……….another case of a new capability provides basic functionality for the masses but hinders the power developer who understands the technology already??
Hi All,
I am having trouble with extension library Dojo Tab Container (djTabContainercontrol) with events.
Currently I am designing one application where I have an extension library Dojo Tab Container and I want to execute some js when I click on a tab’s title bar.
I can’t seem to figure out how to add an event to that.
Please suggest.
Regards,
Yogesh Kashid
If you are 8.5.3 or 9 you can add the custom attribute onShow and this might help
http://stackoverflow.com/questions/7526052/dojo-click-on-the-tab
Marky
Thanks Marky.
We have Domino 8.5.3, I tried the same you suggested and its working. If I wants to use the Server side java script , how can we do that?
Actually I am designing application where my back end is DB2 and front end is XPages. I have requirement where my data needs to come when I click on the Tabs. So I have to use SSJS.
Regards,
Yogesh
you could use XSP.partialRefreshGet to refresh the tabbed panel when you enter it – not a great user experience though
Thanks Marky,
I got the solution , I used onShow event of the djTabPane as you suggested which clicks the button, It partially refreshes the content of the Panel of the djTabPane. It works perfectly.
Hi Marky,
I want to know, is there any way to change the Style sheets of the DOJO Tab container?
Regards,
Yogesh
Hi all,
I am using Notes 9 and I tried using Dojo tab in my xpage. I have a view and a tab container with a tab pane. In a column event I am creating a new tab using this ssjs.
var unid=row.getUniversalID()
getComponent(“djTabContainer1”).createTab({action: “editDocument”, documentId: unid, tabUniqueKey: docId})
now this code works well, if the view exist in the current db where the xpage resides. But if the view is in a different db then the same throws an exception
Error calling method ‘createTab(Object)’ on java class ‘com.ibm.xsp.extlib.component.dojo.layout.UIDojoTabContainer’
Could not open the document
Anyone have idea on this..Kindly help out.. Thanks in advance…
I am afraid I have not tried this – try asking the question on Stack overflow and maybe someone else has