Scrolling With Bootstrap Produces Narrow Header

greggbolinger

I'm using DataTables 1.9 with Bootstrap2. I've read the articles on getting it up and running and everything has been working great until I had vertical scrolling. When I do this I get the following look: https://dl.dropbox.com/u/116330/Screen%20Shot%202012-06-16%20at%208.06.00%20PM.png

My table is initialized like so:

[code]
$('#scenarioDomainTable').dataTable({
"bScrollCollapse": true,
"bPaginate":false,
"sScrollY": "200px",
"bSort":false,
"bInfo":true,
"bAutoWidth":false
});
[/code]

allan

Can you link us to a test page showing the issue please? It looks like the table needs width:100% on it to fill the container.

Allan

greggbolinger

I'll see about providing a test page, but right now I cannot expose it. And adding the 100% width doesn't make a difference. It should just pick up the width of the table which is set by Bootstrap's span classes.

greggbolinger

I've been able to narrow down the issue and provide an example. It has to do with Bootstrap Tabs. If you look at the link I provided, Tab 1 is perfect. However, Tab 2 has the narrow column issue. If I enable sorting and click a column, it widens out appropriately, but always starts narrow.

http://www.greggbolinger.com/DT/index.html

mugoviper

Yeah i have exactly the same problem. When my datatable is not visible on the screen and i use the fnAddData method to insert some data, it becomes narrow as @greggbolinger 's tab2. when i clicked column to sort, it is okey again. So any idea?

i will try to link here in shortest time.

mugoviper

i found a solution but i really dont like it. Must be a better way. after you click tab2(currently unvisible)
call
[code]
$('#tablename').dataTable().fnSort( [ [0,'asc']] );
[/code]
it is just like enable sorting and click a column :-)

but again it must be a better solution.

elshadseyidmammadov

I have the same problem. allan, could you help us to fix this problem?