Replies

• colin Posts: 15,240Questions: 1Answers: 2,599

  March 2022

  Which modal are you referring to?

  Colin
• rf1234 Posts: 2,990Questions: 87Answers: 421

  March 2022 edited March 2022

  use CSS like in here for a Bootstrap 3 modal:

  editor
      .on('open', function (e, mode, action) {
          $('.modal-dialog').addClass("modal-l");
      })
      .on('close', function() {
           $('.modal-dialog').removeClass("modal-l");
      })
  

  with

  @media (min-width: 992px) {
    .modal-l {
      width: 60%;
      max-width:auto;
    }
  }
  

  Adjust for your styling framework.
• alma_delay Posts: 5Questions: 1Answers: 1

  January 2023

  This modal:
  https://datatables.net/extensions/responsive/examples/display-types/bootstrap5-modal.html
  Too, I have the same question.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  January 2023

  @rf1234's solution works nicely. @alma_delay - did you try it with Bootstrap 5 size classes?

  Allan
• alma_delay Posts: 5Questions: 1Answers: 1

  January 2023 edited January 2023

  I refer to:
  $(document).ready(function() {
  $('#Table').DataTable( {
  responsive: {
  details: {
  display: $.fn.dataTable.Responsive.display.modal( {
  header: function ( row ) {
  var data = row.data();
  return 'Details';
  }
  } ),
  renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
  tableClass: 'table'
  } )
  }
  },