TableTools with JQueryUI (JUI, themeroller) buttons overlapping

burnchar

Despite a number of threads on this topic, I was having trouble getting TableTools buttons to not overlap each-other.
I'm posting this to show a solution that may work for those who have this trouble.

I added the following to the final CSS file included:

[code]
.DTTT_button
{
/* Override padding from .ui-button and others */
padding: 0 .6em 1px .4em !important;
/* Force a thin margin between buttons, needed if you want to use a button border */
margin: 0 1px 0 0 !important;
}

.DTTT_button:hover
{
/* Change the button border color on mouseover */
border: 1px solid #aaa;
/* Change the button text color on mouseover */
color: #222 !important;
}

/* I'm using: "sDom": '<"H"lfr<"br /">T>t<"F"ip>'
in order to put the TableTools buttons to the right of "Show N entries" drop-menu.
this adds a bit of space on the left of the TableTools button set so it isn't
smashed up against the nearby text. */
div.DTTT_container {
float: left;
padding-left:1em;
}
[/code]

allan

That's interesting - I haven't seem many threads on this issue. Does it happen for you in my demo: http://datatables.net/release-datatables/extras/TableTools/theme.html ?

Allan

burnchar

Allan,

In FF, Chrome, and IE9 the theme example looks great.
I am not a CSS expert and may have caused the problem I solved, though I stick with the provided files (demo_page.css, etc.) as much as possible to avoid the maintenance of updating them with new releases. In fact, the CSS above is the only CSS I've written for the project. I'm using some of Microsoft's CSS elsewhere, but I've found removing it has no affect on the DataTable.

burnchar

[deleted] -- Tested new version, but found above code was still necessary.