Opened 5 years ago

# TabContainer regression

Reported by: Owned by: dylan dylan blocker 1.14 Dijit 1.12.1

### Description

Comments from Ken Feldt on the mailing list:

I have an application with tabs that was working with dojo 1.10.6, but broke with dojo 1.11.2 and beyond...

The problem involves some mathjax (a mathematic rendering engine) that is dynamically building one of the tabs.

• click example problem 1 - 1 (along left side) --- actually any of the sample problems will do
• you will see the mathjax message along the bottom of a 'curtain' that is raised when all rendering is complete
• you see three tabs - Problem Statement, Solution, and e-Blink

That is how it is supposed to work (dojo 1.10.6)

Try the same thing with https://staging.electricbook.net/book/guest/1

• you see the tabs start to draw OK, but once the math rendering is complete, the tab content seems to be shifted up signficantly. By clicking the third tab (e-Blink) all three tab content areas snap back into place

I will be happy to make some type of change to the code - but I thought I would just ask the question to see if anyone else has this problem.

Oh and....

The dojo page http://dojotoolkit.org/download/ identifies the googleapis server for 1.11.3 as the script reference to use in pages that want

????

Thanks

And then confirmed from Nick Fenwick:

I cannot reproduce the error with a test case, I tried using TabContainer? and StackContainer?. However, our production app definitely has a similar problem to Ken's.

For now I'm having to put this into our main CSS file:

.dijitHidden {

visibility: inherit; display: none;

} .dijitVisible {

visibility: inherit;

}

Hopefully someone can see from Ken's online example what the problem is? I can see now that the position:absolute is supposed to remove the elements from the document flow and visibility:hidden makes them invisible, which certainly does work in the test cases I created, but fails for me and Ken in our production app.

### comment:1 Changed 5 years ago by activepage

I Have the same problem here, in my application with nested TabContainer?. when I programatic select the child TAB the content is shifted up signficantly.

But if an click in the TAB works fine.

In My case I need to have other nested tab and when I change to a TAB without that nested TAB the contet is shifted up.

With 1.10.4 I don´t ahve the problem, but with 1.11.2 I do.

### comment:2 Changed 5 years ago by dylan

There are two changes to dojo/dom-geometry that are the possible culprit here:

Both were done to fix #18717

At a first glance, I'm not seeing how they're related to this issue at all. But from what we can tell by stripping back some of the details from the examples above, we're seeing two different return values for dojo/dom-geometry#position in the provided examples:

{x: 0, y: 0, w: 0, h: 0} vs. {x: 20, y: 980, w: 410, h: 77}

### comment:3 Changed 5 years ago by bill

FYI, it's using visibility:hidden rather than display:none to fix #5672 and #5673. But anyway that's irrelevant if the real bug is in dom-geometry.

### comment:4 Changed 5 years ago by dylan

Milestone: 1.12.2 → 1.12.3 set to dylan new → assigned

### comment:5 Changed 5 years ago by phil0135

I am not entirely sure if it's the same problem, but since Dojo 1.11 all TabContainer? content panes are too large and scrollbars are becoming visible.

I would like to upload an image to make it more clear, unfortunately uploading does not work at the moment.

### comment:6 Changed 5 years ago by dylan

Milestone: 1.12.3 → 1.14
Note: See TracTickets for help on using tickets.