0

Lo mas probable es que me falte subir codigo de algun archivo, pero dejo imagenes para que entiendan qué es lo que me sucede, y si quieren el codigo de algun elemento especifico me dicen y lo subo.

El problema me pasa en todas las paginas que contienen una dataTable, estas se renderizan dentro de un elemento con la class card-body de boostrap4.

Código del dataTable

/*==================================================
Data Table
==================================================*/
$(".tablas").DataTable({

"pageLength": 10,
"language": {
    "sProcessing": "Procesando...",
    "sLengthMenu": "Mostrar _MENU_ registros",
    "sZeroRecords": "No se encontraron resultados",
    "sEmptyTable": "Ningún dato disponible en esta tabla =(",
    "sInfo": "Registros del _START_ al _END_ - Total: _TOTAL_",
    "sInfoEmpty": "Registros del  del 0 al 0 - Total: 0",
    "sInfoFiltered": "(filtrado de _MAX_ registros)",
    "sInfoPostFix": "",
    "sSearch": "Buscar:",
    "sUrl": "",
    "sInfoThousands": ",",
    "sLoadingRecords": "Cargando...",
    "oPaginate": {
        "sFirst": "Primero",
        "sLast": "Último",
        "sNext": "Siguiente",
        "sPrevious": "Anterior"
    },
    "oAria": {
        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
    },
    "buttons": {
        "copy": "Copiar",
        "colvis": "Visibilidad"
    }
}

});

CSS del card-body - (Esto no lo escribi yo, lo trae por defecto la plantilla AdminLTE3)

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

Este es el código del footer (no creo que tenga que ver con el problema pero igual lo pongo)

 <!-- /.content-wrapper -->

 <footer class="main-footer text-center mb-0">
     <div class="float-right d-none d-sm-block">
         <b>Version</b> 1.0.0
     </div>
     <strong>Copyright &copy; 2020 <a href="mailto:[email protected]" target="_blank">Agustin Guerra</a>.</strong>
     Todos los derechos reservados
 </footer>

Este es el html de uno de los tantos card-body que tengo (todos tienen el mismo problema)

  <div class="card-body">
          <table class="table table-bordered table-striped dt-responsive  tablaIngredientes" width="100%">

                <thead>
                    <tr>
                        <th style="width:10px">#</th>
                        <th>Ingrediente</th>
                        <th>Unidad de Medida</th>
                        <th>Precio de Costo</th>
                        <th>Acciones</th>
                    </tr>
                </thead>




            </table>
        </div>

Ahora paso a mostrarles lo que me sucede. Reitero, si necesitan mas codigo solo haganmelo saber en los comentarios, no queria cargar la pregunta de codigo que esté de más, tal vez el problema está en un simple detalle y no me doy cuenta.

Me sucede que el card-body llega hasta un punto y no crece mas, por lo que los elementos del dataTable en un momento se desbordan, chocando con el footer y dando una pésima experiencia para el usario

Este es el card-body

Este es el contenido que se desborda del card-body

Asi se comienza a ver cuando se cargan mas de 8 elementos

Está claro que puedo solucionar esto limitando la cantidad maxima de elementos a mostrar por pagina, si lo dejo en 5 mi pagina nunca va a tener scroll hacia abajo por ende nunca va a existir este problema. Pero la idea es que el usuario pueda elegir cuantos elementos mostrar por pagina, entonces me gustaria poder arreglar esto

1 respuesta 1

2

Por lo general yo utilizo esta línea:

div class="modal-body" class="text-center">
          <div class="container-fluid bd-example-row">
            <div class="modal-title"><h5 class="modal-title" id="exampleModalLongTitle">DATOS DEL RESGUARDANTE ACTUAL</h5></div>
            <table   class="table table-striped" table-bordered responsive class="display" style="width:100%">

cambia la línea que tienes como "card-body" por "modal-body" .

haber si te resuelve el problema que traes.

2
  • Wow, cuando lei tu respuesta pense que no tenia sentido, ya que tengo un card-header, card-body, y card-footer, pero definitivamente tenes razon! Cambiando eso se arregló, y probando en otras paginas se solucionó todo :) Muchas gracias
    – Agustin G.
    Commented el 14 feb. 2020 a las 21:58
  • 1
    @Mani de nada me da mucho gusto que te haya resuelto este inconveniente, son gajes de este oficio detalles de sintaxis,palabras etc etc te ponen de cabeza al suelo... Buen fin!!.
    – Cesarin
    Commented el 14 feb. 2020 a las 22:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.