DTTT buttons' active area/box is shifted to the right

nicsoft

Check this image: http://iandapp.com/shifted_button.png

As you can see there is a dotted line over the Excel and CSV buttons. This lines is shown after I have pressed the Excel-button.

The problem is that when hovering the Excel-button, the hovering-class is only applied when the mouse is over the dotted area. The same thing when clicking, you have to click inside the dotted area. This is of course not good, especially when you want to create a CSV-file and an Excel pops out , because the "active area" stretches out over the CSV button. Same problem with the CSV button.

Is it only me having this problem or can anyone relate to it? Bug? I believe it may have to do with the padding in button.DTTT_button_xls and button.DTTT_button_xls_hover-classes. It's like the hovering hovers over the area where button should have been positioned if there were no padding.

I could of course remove the padding, but I like the buttons, including the size, as they are now and would like to fix the real problem. Any ideas how to fix this?

I believe it's only the swf-button because "print" is not having this issue.

Using Mac and the problem exists in both Chrome and Firefox.

allan

Interesting - is the table hidden when you initialise it? That's the only thing off the top of my head. Can you link me to your page so I can investigate further please?

Allan

nicsoft

The page is "covered" when loading. I'm stretching a div over the entire table until the table has been loaded and then removes the div. Hiding the actual div the table is contained in makes the buttons fully disabled and doesn't work att all. If I'm not covering the table when loading, it's still the same result.

Unfortunately, this project will be in production within two months, for the moment it's not available on -line. But I can of course put any code that is of interest here.

I uses
- text-align:center; on .top.
- DTTT_container is floated to the right
- the buttons inside the DTTT_container is floated to the left.

And I actually use ColVis as well which is positioned in #top to the left of DTTT_container:

[code].ColVis {
clear: left;
margin-bottom: 10px;
text-align: right;
}[/code]

Perhaps not enough information but could any of those things matter?

I really don't know anything about using swf-components, was hoping I don't have to learn either... :)

allan

I can't think of any reason why any of what you mention would cause the active area to be shifted to the right. The only thing I can think of would be that your covering div is forcing a scrollbar and then when it is removed the scrollbar is no longer required (or the other way around). But that still shouldn't cause that problem, so I'm afraid I can't really offer any help without a way to reproduce the problem myself.

Allan

nicsoft

I've been playing around a little bit. Some findings:

In the code below (copied from top in Firebug and removed some rows to make it easier to read), you can see that there is the button tag and the other div. Those are both related to the Excel button. When floating DTTT_container to the left, the visual buttons are floated to the left but
the div is still to the right. It is the div that is the "clickable" element. Hence, when floating the buttons to the left I need to hover the mouse in the empty area to the right until the mouse reacts on the element.

As you can see, the div is absolute positioned. This must be related to my problem, must it not? Shouldn't the div be contained within the buttons? When changing the position of the button the div is not effected and, hence, the positions are not aligned.

Any suggestions?

This is my sDom: "sDom": 'RHF<"top"TClpf>rt<"bottom"ip><"clear">',

Part of top:

[code]

.
.


Excel


.
.



.
.


[/code]

allan

Hi,

Yes indeed it looks like the positioning of the movie clips is the problem (I'm desperately trying to remember why I didn't put them in the button elements are failing miserably... I'll try it and find out what is happening). In the mean time, do you have an image loading in that are? I wonder if that is knocking everything out of alignment.

On your JavaScript console if you run the TableTools fnResizeButtons API method, does it adjust everything and allow it all to work as expected?

Allan

nicsoft

I did try it but no success using fnResizeButtons.

However, I found out that it is related to using jQuery themes. When applying the theme to the buttons using $("button").button(), then it gets corrupted. When not doing that it works fine, but my buttons don't get decorated with my own theme which I really want in order to get a coherent look of my page. This doesn't change where the div vs. buttons are located, it's still as we discussed above.

The only images that are used is the ones in the buttons coming with DTTT.

BTW: I never really understood why one have to use the .button() in order to style the buttons. Perhaps I'm doing it the wrong way? The rest of the style is applied just using '"bJQueryUI": true'.

Any ideas?

allan

Ah interesting! Thanks for investigating and letting me know!

I'm not sure why using $().button() would be needed - does TableTools not automatically apply the button theme like in this example: http://datatables.net/release-datatables/extras/TableTools/theme.html ?

Allan

nicsoft

If not using .button(), than following classes are added to the buttons: DTTT_button DTTT_button_xls ui-button ui-state-default.

There are some classes missing I think. When applying the style using .button() following classes are added: DTTT_button DTTT_button_xls ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only.

So I guess my answer to your question is: yes it does to some extent. But, e.g., the class handling the rounded corners of my buttons is not applied (ui-corner-all).

When I remove ui-button-text-only and ui-widget it works as expected. But...then they do look uggly.

Just FYI: "View source" (the link on the page, not right click...) on the example here, that's how they apply the style: http://jqueryui.com/demos/button/. Also under the "Event"-tab.

nicsoft

Now I found another way to solve it. If I remove 'background' from class button.DTTT_button_xls (did it in Firebug), then it works as well. But then I don't get the image, and I would very much like to have that since it looks much better.

And this is part of the framework so it's outside of my control anyway.

nicsoft

Allan, I did a fix that works for me.

I did add classes "ui-widget ui-corner-all ui-button-text-only" in your TableTools.js, around line 693 where you add the classes.

Then I removed using .button() to style the buttons, except for the ColVis_Button: $(".ColVis_Button").button();

For me to get it to work I needed to do this as well:
Removed '.ui-widget button' and removed font-size from '.ui-button-text-only .ui-button-text' in my jquery custom theme css-fil. But what one should do here I'm pretty sure will differer between applications (e.g. when I remove the sizing of fonts I am inhering the font-size and some things I think I actually added myself at an earlier stage).

Now, the size of the button and the div for flash is the same and located over each other.

allan

Ah - that's interesting. Thanks for the feedback on this. I'll see if I can incorporate this into a fix in the library.

Allan