Firefox - display skewed under

alex.chesser

Hi There,

I'm trying to get dataTables working on my site. Using datatables 1.5.6, when I create a table

[code]



Name



<? foreach ($this->example as $e) { ?>

<?= $e->name ?>

<? } ?>







$(document).ready( function() {
$('#sb_example').dataTable();
} )

[/code]

the data in the table "moves" such that the
"show" and "search" elements are left-aligned and the table body is about a centimeter to the right of where it is "supposed" to be.

Interestingly, if I turn on "display div order" in the firefox web developer toolbar the table date repositions itself to the correct place on the page. (it returns to the wrong spot if I turn it off agian)

I've also noticed that this issue appears in Chrome but only with a large table (7000 elements is broken in chrome, 28 is not.)

It seems most likely that I'll find this my looking in the CSS but if anyone else has seen this before, please feel free to get me up to speed. :)

allan

Hi alex.chesser,

I think you are right - it sounds like a CSS issue to me. I'd look at the floating elements for the show and search in Firebug (assuming you are using my demo CSS). Try altering their width and possibly a few other properties, and hopefully that will align them for you. Try also looking at the layout that I've got in my demos (which I presume render okay for you?), as that might help.

Regards,
Allan

alex.chesser

Hey Alan,

I've looked into it a little more and it *seems* like it might be the case that Firefox doesn't respect "clear: both;"
(though it may also be that I'm trying to cram your table into a small space)

Here's a screen shot of what's going on.
http://i194.photobucket.com/albums/z213/alexchesser/Picture3.png

I've tried playing with the float and the width of the .dataTable_length and .dataTable_filter properties with *marginal* success (ha ha ... pun not intended but so terrible I had to leave it in) anyways - it still doesn't look quite right when I do that.

I'm hoping to find the place where the filter & header header row is "injected" onto the page and somehow encapsulate the whole size&filter controls row in a div of it's own *OR* chuck it on the page as a of its own (though at this point I don't know if I'm quite slick enough to do that).

The "CHROME" version of the bug seems to be related to long field names. As the table seems to resize dynamically, it gets out of whack when the filed names are too long. I fixed this by adding a "truncate" function to the page. (as found on google)

[code]
<?php
function truncate ($str, $length=30, $trailing='...') {
/*
** $str -String to truncate
** $length - length to truncate
** $trailing - the trailing character, default: "..."
*/
// take off chars for the trailing
$length-=mb_strlen($trailing);
if (mb_strlen($str)> $length) {
// string exceeded length, truncate and add trailing dots
return mb_substr($str,0,$length).$trailing;
} else {
// string was already short enough, return the string
$res = $str;
}
return $res;
}

?>




Name



<? foreach ($this->example as $e) { ?>

<?= truncate($e->name) ?>

<? } ?>




[/code]

interestingly though (and as an afterthought just now) the behavior when I turn on web-developer toolbar
in firefox looks like this: http://i194.photobucket.com/albums/z213/alexchesser/Picture6.png

So it may be the case that all I've got to do is add a border of a few pixels to the _length and _filter declarations.

Any quick answers will be greatly appreciated - but I'll keep hammering away and (hopefully) this might help someone else who finds themselves in a similar situation.

alex.chesser

Using "built in functionality" always the best option :)

The internal "sDom" object seems to repair the issue.

[code]
$(document).ready( function() {
$('#sb_domainlist').dataTable({
"sDom": '<"top"f>rt<"bottom"ilp><"clear">'
});
} )
[/code]

allan

Hi alex.chesser,

Sounds like a good way to do it to me :-). It does look like there was some CSS float issues with the width that the table was being displayed in. But if you are happy with it now - that's more than good enough for me!

Regards,
Allan