@dwaddell - Thanks to the information you provided I've got a fix for the issue you were seeing and it will be included in the next revision. Basically I had made an incorrect assumption about the scrolling, and anything which needed a scroll of more than 50% above what the container's width is, would have this error. This has now been corrected properly through a calculation on each draw.
@iuliandum: I've just tried that initialisation code in my example ( http://datatables.net/examples/api/multi_filter.html ), with the css "th, td { border: 1px solid black }" added in, and it all seems to line up perfectly for me. Tried in Safari 4 Mac, Firefox 3.6 Mac, IE8 Win, Firefox 3.5 Win. Can you put this up somewhere and point us to a link? Do you get any warnings in the console?
@iuliandum - it looks like you are using IE8 in compatibility view. Try changing it to IE8 rendering mode and it should work fine. It does for me :-)
I've fired up IE7, and the behaviour you are seeing in compatibility mode (which I see as well) is also seen there. It looks like IE7 has a problem rendering the border on the cells in the footer. Weird since it gets the header correct - but I think this is actually down to a browser bug rather than an issue in DataTables. I'm not sure what the work around for it would be - if there even is one given what it is doing to the footer.
I returned with the same problem, with individual columns filtering misaligned.
Same problem is in IE 6.0 and IE 7.0. In IE 8.0 all is very good. Aligned columns perfect in IE 8.0.
1. In IE 6 and IE 7 alignement of columns looks very ugly when alignement is automatically. When I am fixed columns width (with sWidth), header and footer width is fixed, but body columns width is changed. So, alignement looks ugly.
This is intialize code in multi_filter.html file from you example.
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%",
"oLanguage": {
"sSearch": "Search all columns:"
},
} );
[/code]
1b. In IE 6 and IE 7 when hide a column, the width of remaining columns increases to the table width. So it's OK;
2. In IE 8 aligned columns is perfectly. With automatically width and with fixed width.
2b. In IE 8 when hide a column (Show and hide columns dynamically - in your examples) the width of remaining columns remain fixed but in the place of hidden column remain blank space.
http://i.imgur.com/m0925.jpg
Re. column alignment - I don't think that there is anything I can do to fix this to be honest. If you look at the footer with the border that is applied, you'll see that it's completely messed up. This is going to throw the column sizes out. Perhaps try to set the input elements to something other than 100% width. Say 70% and see if that helps.
Re. IE8 and hiding columns - good shout thanks for catching this. It will be fixed in the next revision. Funny that it only effects IE8 and not any of the other browsers - including IE6/7... However, I think my fix is the correct thing to do anyway.
Thank's for reply. That was it. I set-up 90% width of input text from tfoot table and it works very well!
Thank's!
But, in IE 6.0 and 7.0 (not in 8.0) when I fixed width columns (with sWidth) this don't work. Width of columns is changed in every page. Only width of tbody columns is changed, not thead and tfoot. Do you know what can i do?
First: thx for the nice job :) It's awsome
Next: my problem: Internet Explorer... I have ie 8
In my php code i call the page (for example: like in the server-side exaples row_details.html), what the datatables call, seetings have via an ajax call like this:
[code]
function loadAjaxPage (object,url) {
jQuery.cookie('filename', null);
var dString = 1;
jQuery.ajax({
url : url,
type : 'post',
data : { dataString : dString},
complete : function(xhr){
var text = xhr.responseText;
// This will help users troubleshoot their form:
if(xhr.status == 404){
text = 'no such file';
}
jQuery('#'+object).html(text);
}
});
return false;
};
[/code]
in ie compatibility view (ie7 comp; old style view or ie7 standard) only the header and footer is drawn and the "Loading data from server"
in normal mod is everything fine.
There is nothing obvious from the code - do you get any Javascript errors? I presume that 'object' is a valid string and a DOM element? Also is there a reason why this is the 1.7 beta thread from 6+ months ago?
Replies
Thanks!
Allan
Please check in next revision about misaligned with individual column filtering, like in this example:
http://i.imgur.com/WHk24.jpg
This is initialized code:
[code]
var oTable = $('#example').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%",
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
[/code]
Allan
I use IE 8.0 and [code] th, td { border: 1px solid black } [/code] in demo_table.css file and I obtained this examples
pag.1
http://i.imgur.com/Qglf3.jpg
pag. 4
http://i.imgur.com/Hk9aA.jpg
And I don't get any warning messages in console.
This is intialize code:
[code]
var oTable = $('#example').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%",
"oLanguage": {
"sSearch": "Search all columns:"
}
[/code]
And, very important, when remove tfoot table defintion from multi_filter.html file, all working OK as below
http://i.imgur.com/8nJCd.jpg
I've fired up IE7, and the behaviour you are seeing in compatibility mode (which I see as well) is also seen there. It looks like IE7 has a problem rendering the border on the cells in the footer. Weird since it gets the header correct - but I think this is actually down to a browser bug rather than an issue in DataTables. I'm not sure what the work around for it would be - if there even is one given what it is doing to the footer.
Allan
That is. My Web server (Apache) served pages in IE7 compatibility mode and I can't change this settings. Maybe you will find solution.
Thanks again!
I returned with the same problem, with individual columns filtering misaligned.
Same problem is in IE 6.0 and IE 7.0. In IE 8.0 all is very good. Aligned columns perfect in IE 8.0.
1. In IE 6 and IE 7 alignement of columns looks very ugly when alignement is automatically. When I am fixed columns width (with sWidth), header and footer width is fixed, but body columns width is changed. So, alignement looks ugly.
This is intialize code in multi_filter.html file from you example.
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%",
"oLanguage": {
"sSearch": "Search all columns:"
},
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "10%"},
{ "sWidth": "40%"},
{ "sWidth": "30%"},
{ "sWidth": "10%"},
{ "sWidth": "10%"}
]
} );
[/code]
1b. In IE 6 and IE 7 when hide a column, the width of remaining columns increases to the table width. So it's OK;
2. In IE 8 aligned columns is perfectly. With automatically width and with fixed width.
2b. In IE 8 when hide a column (Show and hide columns dynamically - in your examples) the width of remaining columns remain fixed but in the place of hidden column remain blank space.
http://i.imgur.com/m0925.jpg
Re. column alignment - I don't think that there is anything I can do to fix this to be honest. If you look at the footer with the border that is applied, you'll see that it's completely messed up. This is going to throw the column sizes out. Perhaps try to set the input elements to something other than 100% width. Say 70% and see if that helps.
Re. IE8 and hiding columns - good shout thanks for catching this. It will be fixed in the next revision. Funny that it only effects IE8 and not any of the other browsers - including IE6/7... However, I think my fix is the correct thing to do anyway.
Allan
Thank's for reply. That was it. I set-up 90% width of input text from tfoot table and it works very well!
Thank's!
But, in IE 6.0 and 7.0 (not in 8.0) when I fixed width columns (with sWidth) this don't work. Width of columns is changed in every page. Only width of tbody columns is changed, not thead and tfoot. Do you know what can i do?
All the best!
First: thx for the nice job :) It's awsome
Next: my problem: Internet Explorer... I have ie 8
In my php code i call the page (for example: like in the server-side exaples row_details.html), what the datatables call, seetings have via an ajax call like this:
[code]
function loadAjaxPage (object,url) {
jQuery.cookie('filename', null);
var dString = 1;
jQuery.ajax({
url : url,
type : 'post',
data : { dataString : dString},
complete : function(xhr){
var text = xhr.responseText;
// This will help users troubleshoot their form:
if(xhr.status == 404){
text = 'no such file';
}
jQuery('#'+object).html(text);
}
});
return false;
};
[/code]
in ie compatibility view (ie7 comp; old style view or ie7 standard) only the header and footer is drawn and the "Loading data from server"
in normal mod is everything fine.
Do You have any idea?
Thx
Steve
Allan