View Full Version : Floating an element inside a tabpanel (or any cardlayout)

9 Jan 2013, 11:43 AM
Hello all, I'm currently working on a large project, and I've come across a frustrating situation. I have an element that needs to float on top of the content inside a cardlayout. I'm able to float it above everything with ease, however I need it to float only above the content of a single panel.

I have created a jsfiddle to better demonstrate what I'm trying to do: http://jsfiddle.net/evanogas/n8nkD/2/ (http://jsfiddle.net/evanogas/n8nkD/2)

In the fiddle, I just have a button added to the second tab, however I'd like it to float above the panel in that tab. However I'd also like it to go away when I navigate to the other tabs. This is the part that has me totally stumped.

I don't know if it's like this for all cardlayouts, but I have confirmed that tying into events is not an option for my specific situation. Everything is rendered all the time. There are no consistent hide() or show() events for anything in the layout, so I can't explicitly hide the floating element and re-show it without ending up with some really unsavory code.

I tinkered around with renderTo and constrainTo with little success, so I figured I'd post here to see if anyone has any good ideas off the top of their head. Thanks!

As an added note, the documentation for the floating config implies that if I add the floating element to a parent container, everything will magically work fine, but that does not appear to be the case. In my example, if I add my button as a child of the tab, it doesn't get rendered at all.

11 Jan 2013, 8:24 AM
The floating button you want to be able to move around only in the 2nd tab? Do you want it movable only within the body of the tab or anywhere in the tab panel?

Also, with card layout you get activate and deactivate methods on each item of the card layout that can be used instead of show/hide.

11 Jan 2013, 6:16 PM
The activate events weren't firing due to what appears to be a bug elsewhere in the app.

I ended up solving the problem by simply using an absolute layout, setting the x and y positions, and correctly handling the z-index. Here's a working example on jsFiddle: http://jsfiddle.net/n8nkD/5/