Answers

• alenb Posts: 7Questions: 3Answers: 0

  July 2016

  This becomes a huge issue on mobile. Is there no fix for this at all?
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  July 2016

  I don't believe this is a DataTables issue I'm afraid, but rather one in Bootstrap. bootstrap uses:

  @media screen and (max-width: 767px)
  .table-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #ddd;
  }
  .table-responsive {
      min-height: .01%;
      overflow-x: auto;
  }
  

  If you remove the two overflow statements, it works as expected.

  You can reproduce the issue without DataTables: https://jsfiddle.net/ujj3zkdq/1/ . I've just added a row and col-sm-12 into the responsive table. I'm guessing Bootstrap's responsive tables possibly were not designed to be used like that.

  Allan
• alenb Posts: 7Questions: 3Answers: 0

  July 2016 edited July 2016

  That's the purpose of .table-responsive within Bootstrap. It allows the table to work on mobile. Removing the overflow defeats the purpose.

  I don't believe this is a DataTables issue I'm afraid, but rather one in Bootstrap. bootstrap uses:

  ...

  You can reproduce the issue without DataTables: https://jsfiddle.net/ujj3zkdq/1/ . I've just added a row and col-sm-12 into the responsive table.

  Seems like Datatables is doing something it shouldn't be then. Why use row/cols inside a responsive wrapper that's only meant to be used with tables?

  I'm guessing Bootstrap's responsive tables possibly were not designed to be used like that.

  Bit of a cliffhanger moment. Any ideas for a workaround?
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  July 2016

  Yes, use dom and have it not use Bootstrap's rows and columns markup. The dom documentation shows the default string for Bootstrap.

  Seems like Datatables is doing something it shouldn't be then. Why use row/cols inside a responsive wrapper that's only meant to be used with tables?

  Its being used inside a div container - DataTables doesn't know that it is in a responsive table container. Perhaps it need a check for that, but then it wouldn't be able to correctly layout the search box etc. Perhaps a better fix would be to use:

  dom: 
    "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
    "<'row'<'col-sm-12'<'responsive't>r>>" +
    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
  

  (yes it hurts the eyes - sorry). Basically that will put the table in a responsive class div inside the structure that DataTables controls. So you would still just have <table> rather than the responsive container.

  Allan