Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#7732 closed bug (notabug)

FX Causes Incorrect Show/Hiding with Nested Tab Panels

Reported by: Highway of Life Owned by: Highway of Life
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: git (not yet released)
Keywords: Cc:
Blocked by: Blocking:

Description

Example: http://jsfiddle.net/highwayoflife/8rgfm/ Actions: Click through the tabs multiple times.

If using nested tab panels within parent containers, and manually show/hiding those containers when a tab is activated/deactivated, instead of hiding/showing, the fx "toggle" will not hide a panel when the parent element is already hidden, but then hide the panel when it is activated. See the JSfiddle linked above for a clear example.

Tested on the latest github version of jquery.ui.tabs (v 1.9 m6)

Change History (13)

comment:1 Changed 9 years ago by Scott González

Owner: set to Highway of Life
Status: newpending

I really don't understand what you're trying to accomplish. Why are you manually showing and hiding the tabs if you want them animated? Also, this has nothing to do with nested tabs.

comment:2 Changed 9 years ago by Highway of Life

Status: pendingnew

Scott, please read the code linked in the jsfiddle. It's really very simple and all self explanatory. You can even test it yourself in the jsfiddle. I'm not manually showing and hiding the TABS. I'm hiding and showing the tab PANEL's PARENTs, because jquery.ui.tabs does not handle parents (obviously). I'm not nesting TABS, I'm nesting tab PANELS inside of containers.

comment:3 Changed 9 years ago by Scott González

Status: newpending

That doesn't answer the question of why you have wrappers.

comment:4 Changed 9 years ago by Highway of Life

Status: pendingnew

A good reason to have containers that are not tied to the tab panels is to contain content that won't be overwritten by incoming AJAX. Having containers is the best way to do this. However, it doesn't matter why I have containers (wrappers), as the point of jQuery/jQuery UI is for people to use it in varying circumstances. The containers simply illustrate a bug with the FX toggle in the jquery.tabs.

comment:5 Changed 9 years ago by Scott González

Status: newpending

It does matter, jQuery UI's goal is not to support 100% of use cases that people come up with; it's to support a large majority of use cases. You still haven't explained what you're trying to accomplish. Why are you instantly hiding and showing the wrappers while animating the panels? It's not at all clear what you want to happen.

comment:6 Changed 9 years ago by Highway of Life

Status: pendingnew

"A good reason to have containers that are not tied to the tab panels is to contain content that won't be overwritten by incoming AJAX." e.g.:

<section>
    <header>
        <h1>Content we don't want overwritten</h1>
    </header>
    <div id="tab1" class="tab-panel"></div>
</section>

comment:7 Changed 9 years ago by Scott González

Status: newpending

"Why are you instantly hiding and showing the wrappers while animating the panels? It's not at all clear what you want to happen."

I honestly have no idea what you want this to do. You have contradictory code. You're trying to animate the panels AND instantly toggle their wrappers. Please explain what you're trying to accomplish, visually, or I can't help you.

comment:8 Changed 9 years ago by Highway of Life

Status: pendingnew

Scott, this is not a support request, I don't need any assistance. I have this working on my project using a workaround. It is a bug report. I'll try to explain in more detail:

The way that jquery.ui.tabs is designed, it's not straightforward to make your panels seperate from your tabs. For the project that I'm working on, I have 2-levels of navigation, like so: http://jsfiddle.net/highwayoflife/qEyK9/1/ (There's a weird issue with jsfiddle not running the second sub-tabs.tabs, so make sure you click RUN on that fiddle to see a more accurate result)

If the panels don't get a container, they will overwrite any content with the incoming AJAX request, so the "wrappers" are necessary.

Now, while this would work without any effects at all (show/hide), a huge bit of content coming in via AJAX will cause an annoying jump. The height toggle smooths out the animation. So the oldPanel gets hidden immediately (it does jump in this case), but the new panel will come in a little more gracefully.

There are a couple of ways around it, for example, I could manually animate the opening and closing of the panels rather than rely on .tabs(fx) to do that, but that's beside the point. The issue here, and thus the bug report is the fact that the fx animation will always toggle rather than excplicitly hide when the panel closes, and show when the panel is activated. So when the parent element (section) is already hidden, the animation (height: 'toggle') will not hide the panel, so the next time the panel is activated, the height: 'toggle' will fire and hide the content rather than show it... which is important for incoming AJAX content.

While the jsfiddle example is not exhaustive for every circumstance, I tried to simplify it as much as possible to illustrate the problem with the animation within the .tabs widget.

Hope that helps.

  • David

comment:9 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

This is definitely not a supported use case, so if this is the only way that the toggling breaks, then I don't consider this a bug.

comment:10 Changed 9 years ago by Highway of Life

What is not a supported use case?

comment:11 Changed 9 years ago by Highway of Life

I created a simpler example to illustrate the problem: http://jsfiddle.net/highwayoflife/ZXkuc/3/ http://jsfiddle.net/highwayoflife/ZXkuc/4/ 3 works, 4 does not... the only change is the way the wrapper is hiding: hide(), vs slideUp(1)

comment:12 Changed 9 years ago by Highway of Life

Sorry, had that in reverse... 3 does not work when using hide():
http://jsfiddle.net/highwayoflife/ZXkuc/3/

And 4 does work when using an animation effect, such as slideUp(), fadeTo, hide([duration]), etc..:
http://jsfiddle.net/highwayoflife/ZXkuc/4/

Basically the jquery.ui.tabs does not play well when toggling display, but works when using an animation.

comment:13 Changed 9 years ago by Scott González

There are two things that you're doing that aren't supported. 1) Trying to use a wrapper element as the actual tab panel. 2) Manually controlling the display of the panels. The combination of them is what's causing your problem, but we don't even support either of them alone. This is not how the tabs are meant to be used.

Note: See TracTickets for help on using tickets.