Datatables TableTools + Twitter Bootstrap: DTTT_collection_background spawned multiple times

oktav2k3

Hello,

I'm using TableTools with Twitter Bootstrap patch and apparently there is an issue if a user presses a button that contains a collection more than once. Basically the div.DTTT_collection_background gets spawned multiple times (once per click) but when clicking away, only the last div disappears. The other divs will continue to block the user from interacting with the other elements on the page.

Initially I thought the problem was localized but it appears this problem is present in the examples on this site itself.
Here is the link:
http://datatables.net/release-datatables/extras/TableTools/bootstrap.html

allan

That's very interesting.

It appears to effect only the Bootstrap example, and only if you don't mouse out and then back into the button. If you do then it works as expected.

I've had a look at the bootstrap CSS and I don't see anything that would cause this, so I'm not exactly sure what is happening here. I will look into it further.

Allan

oktav2k3

Thanks Allan,

Yes, I noticed that too. Meanwhile I changed some code in the javascript. It's not pretty but it works by removing all instances of that background div. Initially I tried to remove the background but it appears it's needed for the menu to close (by clicking on it). I've not read every bit of the source js so I'm pretty sure I'm not doing this in the most efficient manner.

I made a pull request on github: https://github.com/DataTables/TableTools/pull/26


EDIT:

I think twitter bootstrap was messing with the z-indexes. The background div was not covering the .DTTT_button_collection thus making an extra click possible.

Final change on css without messing with the js:

[code]
div.DTTT_collection_background {
background: transparent url(../images/background.png) repeat top left;
z-index: 2001;
}

ul.DTTT_dropdown.dropdown-menu {
z-index: 2003;
}
[/code]

In my case this is working correctly.

allan

I was wondering if it was a z-index issue as well, but I couldn't see how it would cause the error without a mouse move, but exiting and leaving the element allows it to behave as normal. I was looking for a pseudo class in bootstrap that might explain it, but couldn't see it.

Did you find something, or was 2001 / 2003 by experimentation?

Thanks,
Allan

oktav2k3

I couldn't find anything regarding this awkward behavior with the mouse. However there is a CSS class in TableTools.css with a z-index of 2002.

[code]
div.DTTT_collection {
width: 150px;
padding: 8px 8px 4px 8px;
border: 1px solid #ccc;
border: 1px solid rgba( 0, 0, 0, 0.4 );
background-color: #f3f3f3;
background-color: rgba( 255, 255, 255, 0.3 );
overflow: hidden;
z-index: 2002;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-ms-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-o-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
[/code]

The DTTT_collection element does not get created anywhere, however I'm thinking it should get created once you click a button that opens a collection (maybe bootstrap overrides this?). This way, you'd have the background div with a z-index of something? and this DTTT_collection element right above it (with a z-index of 2002). This background would also cover the button that opens the collection, therefore you would not be able to double click.

Since the DTTT_collection has a z-index of 2002, I thought, hey, let's give the background the previous z-index. This way the DTTT_collection would be on top of my background, and the background would be on top of everything. In fact, if you look closely on http://datatables.net/release-datatables/extras/TableTools/bootstrap.html , when the background is on you can still click the "Copy" button. Most likely due to the lack of an explicit z-index for the background.

Using bootstrap, this DTTT_collection doesn't get created. It creates instead a ul.DTTT_dropdown.dropdown-menu with a z-index of 1000 (behind the background) making the collection buttons unclickable.

So I simply, added this rule:
[code]
ul.DTTT_dropdown.dropdown-menu {
z-index: 2003;
}
[/code]

I'm assuming the z-index could also be 2002 since DTTT_collection will not get created with bootstrap.

Hope this helps.
Oktav