DTTT buttons' active area/box is shifted to the right
DTTT buttons' active area/box is shifted to the right
nicsoft
Posts: 37Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
Allan
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
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]
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
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?
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
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.
And this is part of the framework so it's outside of my control anyway.
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