Bug sScrollX, or misunderstanding?
Bug sScrollX, or misunderstanding?
mackiemack
Posts: 2Questions: 0Answers: 0
Hello all,
I've been getting erratic results with sScrollX values. Namely, my tables are often rendered much larger than the values I enter (table renders at 1200 px width, when I entered 600 px.) I interpreted the documentation as claiming that setting sScrollX in pixels should render the outer table no wider than that number of pixels. The results are the same in various browsers.
I can't put my finger on it, but it seems that datatables works as follows: the minimum width of the outer div seems to always be as large as the minimum css-width of the theads. Is this correct? If it is, I think it must be a bug.
For an easily available example: I downloaded the "DataTables horizontal and vertical scrolling example" and changed the initialization to the following:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": 150,
"sScrollX": 150,
"bScrollCollapse":true
} );
} );
[/code]
The data gets rendered at 400 something pixels wide, without any horizontal scroll-bars.
Do I just need to work on the css that applies before the datatable is rendered?
Hope someone can help,
Mack
I've been getting erratic results with sScrollX values. Namely, my tables are often rendered much larger than the values I enter (table renders at 1200 px width, when I entered 600 px.) I interpreted the documentation as claiming that setting sScrollX in pixels should render the outer table no wider than that number of pixels. The results are the same in various browsers.
I can't put my finger on it, but it seems that datatables works as follows: the minimum width of the outer div seems to always be as large as the minimum css-width of the theads. Is this correct? If it is, I think it must be a bug.
For an easily available example: I downloaded the "DataTables horizontal and vertical scrolling example" and changed the initialization to the following:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": 150,
"sScrollX": 150,
"bScrollCollapse":true
} );
} );
[/code]
The data gets rendered at 400 something pixels wide, without any horizontal scroll-bars.
Do I just need to work on the css that applies before the datatable is rendered?
Hope someone can help,
Mack
This discussion has been closed.
Replies
Its not just you, this is a bit of a quick of how sScrollX works... You can see the problem that you describe here: http://live.datatables.net/uwejuy/2/edit - you would probably expect the table to have a maximum width of 150px there...
However, DataTables has a minimum width adjustment which effectively overrules that. The table can't fit into less that what is has been drawn as and this maintain the colin alignment, thus it corrects for that, resulting in this quirk.
So sScrollX actually, currently, operates slightly differently from sScrollY, in that it doesn't force the width of the container element - that is left to the CSS for the parent - which you can see done here: http://live.datatables.net/uwejuy/edit#javascript,html .
The upshot is that at the moment I wouldn't expect to see sScrollX as anything other than 100% at the moment. To force the table to be smaller, the container element must be made smaller.
This is an issue that I will try to address in future releases of DataTables.
Regards,
Allan