Problema tabs responsive con datatables
Problema tabs responsive con datatables
Estoy desarrollando una aplicación web basada en Adminlte, el caso es que en el ficha de los clientes quiero poner varias pestañas para poder ver diferentes apartados (Datos generales, visitas, pedidos, etc)
Este es el código que tengo para las pestañas:
<div class="content">
<div class="container-fluid">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="perfil-tab" data-bs-toggle="tab" data-bs-target="#perfil" type="button" role="tab" aria-controls="perfil" aria-selected="true"><a class="btn btn-app"><i class="fa fa-user"></i>General</a></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="clientes-tab" data-bs-toggle="tab" data-bs-target="#clientes" type="button" role="tab" aria-controls="clientes" aria-selected="false"><a class="btn btn-app"><i class="fa fa-clipboard"></i>Propuestas</a></button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="visitas-tab" data-bs-toggle="tab" data-bs-target="#visitas" type="button" role="tab" aria-controls="visitas" aria-selected="false"><a class="btn btn-app"><i class="fa fa-calendar"></i>Visitas</a></button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="perfil" role="tabpanel" aria-labelledby="perfil-tab">
<?php
include("socios_perfil_edit.php");
?>
</div>
<div class="tab-pane fade show active" id="clientes" role="tabpanel" aria-labelledby="clientes-tab" >
<?php
include("propuestas.php");
?>
</div>
<div class="tab-pane fade" id="visitas" role="tabpanel" aria-labelledby="visitas-tab" >
<?php
include("visitas-socio.php");
?>
</div>
</div>
</div>
El problema es que en el include propuestas.php tengo un datables y sólo se muestra correctamente responsive y muestra el botón control si en su tab correspondiente indicó "show active" y el problema es que no quiero que se muestre esa pestaña cuando entras en la ficha, quiero que se muestre la primera, pero si pongo el "show active" sólo en la primera, la segunda pestaña no funciona correctamente.
This question has an accepted answers - jump to answer
Answers
You say they don't show correctly. I assume you mean that the column widths aren't calculated properly and Responsive is not working as expected. In this case you will need to use
responsive.recalc()
when the table becomes visible. See this example.If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin