Home / Questions / 149656
Accepted
Sebastián Lagos Yañez
Asked: 2020-03-23 12:23:39 +0800 CST 2020-03-23 12:23:39 +0800 CST

How can I make a modal responsive, for a dataTable?

  • 772

It turns out that I have a modal that displays a table, but the table dataTableis passed to the right and is not kept inside the modal. Here's an example of what I did.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

 <div class="modal fade" id="compromisos" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Compromisos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="compromiso_ejecutivo" class="display nowrap">
                        <thead>
                          <tr>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                          </tr>
                        </thead>
                        <tbody>
                        
                        </tbody>
                    </table>
                </div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#compromisos > .modal-body').css({width:'auto',height:'auto', 'max-height':'100%'});
                        $("#compromiso_ejecutivo").dataTable();
                    });
                </script>
            </div>
        </div>
    </div>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#compromisos">
 Mostrar
</button>

That is what I have tried to do but I don't know how to make the content responsive, not even with the lgmodal class it works well, besides the columns may vary later.

NOTE: I use bootstap 4 and jquery.

jquery

2 Answers

  1. Best Answer

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

 <div class="modal fade" id="compromisos" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Compromisos</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="compromiso_ejecutivo" class="display nowrap table-responsive">
                        <thead>
                          <tr>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                              <th>No hay columnas</th>
                          </tr>
                        </thead>
                        <tbody>
                        
                        </tbody>
                    </table>
                </div>
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#compromisos > .modal-body').css({width:'auto',height:'auto', 'max-height':'100%'});
                        $("#compromiso_ejecutivo").dataTable();
                    });
                </script>
            </div>
        </div>
    </div>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#compromisos">
 Mostrar
</button>

    Put bootstrap's table-responsive class on it

    <table id="compromiso_ejecutivo" class="display nowrap table-responsive">

    and so the table will adapt to the size of the modal

    • 1

  2. The problem is that you are applying this style to the modal:

    @media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}

    And it's limiting you to 500px in width.

    You have the modal-lg class for larger size:

    @media (min-width: 992px) {
  .modal-lg {
    max-width: 800px;
  }
}

    And since in this case it would not be enough, the best thing would be to overwrite it:

    .modal-lg {
    max-width: 80% !important;
}

    show

    You also have the option to modify the width to the desired value in the event show:

     $('#compromisos').on('show.bs.modal', function () {
   $(this).find('.modal-dialog').css({
   'max-width':'80%'
   });
 });

    show

    • 1