0

I am using a dijit/layout/TabContainer with two tabs. I create them like this:

<div dojoType="dijit.layout.TabContainer" doLayout="false">
    <div dojoType="dijit.layout.ContentPane" title="First tab" style="background-color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
    <div dojoType="dijit.layout.ContentPane" title="Second tab" style="background-   color:rgb(237,240,246)" doLayout="false"> Some dynamic content here </div>
</div>

This works fine for Firefox, Chrome and IE9, but doesn't render properly on ipad with Safari. The first time the first tab displays correctly, but then it takes the width of the second tab, which is larger. I believe that this should not happen as I have added the doLayout flag. I don't know if it matters, but I am using dojo with xpages framework.

Thanks a lot in advance!

kmak
  • 63
  • 9

1 Answers1

1

I added 

controllerWidget="dijit.layout.TabController"

to the div of TabContainer along with a width in percent and and now it displays correctly in Safari too.

The problem was that Safari needed a width to be defined. But as my content is dynamic, I couldn't define a fixed width in pixels. So in order to use width in percent I had to also add the above flag. I don't know if this is the appropriate way to achieve this, but it fixes my problem.

kmak
  • 63
  • 9