zClip not working with jQuery UI dialog box in Bootstrap tab

Question

Why won't zClip (1.1.1) work with jQuery UI (1.8.23 and 1.8.21, at least) dialog boxes after you call .dialog() on them? The Copy to Clipboard button is in a bootstrap tab-pane.

Answer 1

I just spent two hours trying to figure this out and couldn't find an equivalent question on SO. If you're trying to use jQuery UI with zClip, even though the Copy to Clipboard button isn't inside the dialog box, then watch out: it won't work. I've tried all of the answers to similar questions on SO (like setting absolute position, setting block-inline, setting zIndex, etc...), and none of them worked. I'm pretty sure it also has to do with the fact that the ZeroClipboard copy button is within a Bootstrap tab-pane.

I hope they fix it soon, whoever's fault it is.

UPDATE: I switched to Bootstrap modals, and the ZeroClipboard copy button works when the tab-pane containing the ZeroClipboard copy button is also active. If it's not active, it doesn't work. I'm pretty sure I tried this with the jQuery UI dialog boxes too, but it didn't work.

Answer 2

It didn't work on boostrap modal on latest version.