Datatables vertical rendering problem when using tabs-x (Left tabs)

ozzeruk82

I have an issue with Datatables and after many hours still can't figure out a solution. So I'm asking for additional suggestions.

I am using Bootstrap 3 with a plug-in that allows for a tabbed interface with tabs going down the left of the tab pane. (an add-on that uses code from http://plugins.krajee.com/tabs-x I believe)

This works very well and seems to be a popular add-on. I have no problem showing content in the tab panes, everything from text to normal tables, to remote content etc, everything is fine.... except for a Datatables table.

As you can see from the picture, for some reason the vertical position of the Datatable gets set really far down the page, I believe it goes below the lowest tab on the left.

If I set the tabs to be at the top, then it renders correctly.

<a href="http://imgur.com/VfRb2vi"><img src="http://i.imgur.com/VfRb2vi.png" title="source: imgur.com" /></a>

To confirm, the table is shown correctly where the 'Test' text currently is, until I add javascript code to turn it into a Datatables table, then it renders much further down the page.

I have tried many CSS settings to try and force the Datatables table back up the panel to where it should be, but without luck. I'm sure there is a simple way to force it to render where everything else correctly renders, at the top of the panel.

Anyone have any ideas? I have listed this as a bug as I presume Datatables should behave in the same way as the underlying table does before it gets turned into a Datatables table. Additionally, the add-on creates no problems with anything else, it's just Datatables.

Many thanks in advance,

Oli

bindrid

I ran into a similar problem last week using regular bootstrap tabs. Not saying this will fix your problem but my problem was that I had 3 individual tabs but they were not inside a tab container

I had

 <div class="tab-pane active" id="red">content</div>
 <div class="tab-pane active" id="blue">content</div>
 <div class="tab-pane active" id="green">content</div>

what I should have had was

<div id="my-tab-content" class="tab-content">
     <div class="tab-pane active" id="red">content</div>
     <div class="tab-pane active" id="blue">content</div>
     <div class="tab-pane active" id="green">content</div>
</div>