When DataTables on responsive view, Show 10 entries and search column are display incorrectly

sl5310

When I saw the example on this website, Show 10 entries and search column are at the center
but mine table is not at the center
Please see the image
http://imgur.com/ChqimU3

this is css

      <link href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" rel="stylesheet">
      <link href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" rel="stylesheet">

this is js

  <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>

JavaScript

$('#example').DataTable( {
    responsive: true
} );

Table

 <table id="example" class="table table-hover table-bordered dt-responsive" cellspacing="0" width="100%">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Title</th>
                                                <th>Created</th>
                                                <th>Short Description</th>
                                                <th>Last Updated</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
/////data///
</tbody>
</table>

allan

Can you give us a link to the page so we can look into it please. It looks like a CSS margins issue.

Allan

sl5310

Yes, i found out is css problem and i solved it!! thanks!!

sl5310

But I face a problem when my datatables is inside a bootstrap tab, i click the tab and the datatables is not responsive, i need to refresh the page the datatables only show responsive view,

<div class="tab-pane" id="manage_leave"> </div>

i found is if the div class is active then is responsive view else not

allan

You need to call the responsive.recalc() method when the table is made visible.

Allan