Any idea why my dojo TabContainer is so messed up?

Question

I have a website that has a dojo TabContainer. I've been trying to upgrade the dojo library from 1.2 to the later versions.

At 1.5 I've run into a problem.

This is what the TabContainer looks like in FF at 1.5, and what it looked like in the previous versions in all browsers. (IE, Chrome, Safari)

Yay Firefox

At 1.5, this is what it looks like in IE9

Boo IE

I can't figure out where these arrow buttons are coming from. The styling and markup hasn't changed, I've just swapped out the dojo libraries.

Here is the code:

<asp:Repeater ID="TabRepeater" runat="Server">
    <HeaderTemplate>
      <div dojoType="dijit.layout.BorderContainer" gutters="false" style="width:600px">
        <div dojoType="dijit.layout.TabContainer" style="width:600px; height:350px">
    </HeaderTemplate>
    <ItemTemplate>
      <div dojoType="dijit.layout.ContentPane" style="display:none; height:300px" title="<%#Eval("Name")%>">
        <!-- Content -->
      </div>
    </ItemTemplate>
    <FooterTemplate>
        </div> <!-- End Tab Container -->
      </div> <!-- End Border Container -->
    </FooterTemplate>
</asp:Repeater>

It's pretty basic, I've defined the sizes for the containers. I'm not sure why these scroll buttons won't go away. I'm not sure if this is a problem with my code or with the TabContainer since their documentation site doesn't even work in IE9

FF: Firefox

IE9: IE9

Any idea what's wrong?

score 1 · Accepted Answer · answered Feb 17 '12 at 08:19

1

Dojo 1.5 is not officially compatible with IE9. Compatibility has been officially partially supported since dojo 1.6.x and is supposed to be fully compatible with dojo 1.7.x

Also, I do not know much about asp, but this does not look like a good practice

<HeaderTemplate>
  <div dojoType="dijit.layout.BorderContainer" gutters="false" style="width:600px">
    <div dojoType="dijit.layout.TabContainer" style="width:600px; height:350px">
</HeaderTemplate>

to have a "tag" (except if this tag disappear and is not replaced by any html) enclosing unclosed divs...

answered Feb 17 '12 at 08:19

PEM

1,948
14
13

the FooterTemplate will close the divs. Thanks for the answer though. I guess I have no choice but to keep upgrading and hope the problem resolves itself. If no one else has any suggestions over the next few days, I'll accept this answer. – Brandon Feb 17 '12 at 15:11
We had to *run IE9 in IE8 compatibility mode* until we upgraded dojo to 1.6. Dojo 1.5 definitely had ie9 problems. – mtyson Feb 17 '12 at 20:03

score 0 · Answer 2 · answered Jul 25 '16 at 18:16

I had the same issue using dojo 1.10.4. I was not using asp.net.

I solved this by setting the properties useMenu and useSlider of the TabContainer class:

var container = new TabContainer(
  {
    style: 'height: 100%; width: 100%;',
    useMenu: false,
    useSlider: false
  }, domConstruct.create('div'))

Thanks to David Walsh.

Any idea why my dojo TabContainer is so messed up?

2 Answers2