Scrolling With Bootstrap Produces Narrow Header

Scrolling With Bootstrap Produces Narrow Header

greggbolingergreggbolinger Posts: 3Questions: 0Answers: 0
edited June 2012 in DataTables 1.9
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]

Replies

  • allanallan Posts: 63,394Questions: 1Answers: 10,451 Site admin
    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
  • greggbolingergreggbolinger Posts: 3Questions: 0Answers: 0
    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.
  • greggbolingergreggbolinger Posts: 3Questions: 0Answers: 0
    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
  • mugovipermugoviper Posts: 2Questions: 0Answers: 0
    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.
  • mugovipermugoviper Posts: 2Questions: 0Answers: 0
    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.
  • elshadseyidmammadovelshadseyidmammadov Posts: 1Questions: 0Answers: 0
    I have the same problem. allan, could you help us to fix this problem?
This discussion has been closed.