Horizontal scroll bar does not appear when using datatable

Asked

Viewed 1,015 times

3

I have a screen where the data is shown in the following form:

inserir a descrição da imagem aqui

When accessing on smaller screens (cell phones, tablets), the datatable appears cut, however the horizontal scroll bar does not appear, so the user can not see the other half of the table. What could I do?

Obs: This problem only arose after I started using datatable, because if I use a normal table the scrolling appears.

css twitter-bootstrap css3
  • 1

    Have you tried? https://datatables.net/extensions/responsive/

  • @Diegofelipe yes, I’m using.

2 answers

2

There must be some 

 overflow: hidden;

in the CSS of the datatable parent container or even in the body, so in lower resolution, the screen decreases and the content disappears. Just take it out or modify it to

 overflow: auto;

Which is resolved :)

  • no, I already checked. This problem only arose after I started using datatable, because if I use a normal table the scrolling appears.

  • 1

    Does datatable use/add any CSS of its own? Can you find the problem there.

  • @jonnierhenrique even putting: . dataTables_wrapper . dataTables_scroll div.dataTables_scrollBody { *margin-top: -1px; -Webkit-overflow-scrolling: auto; } . dataTables_wrapper . dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing, . dataTables_wrapper . dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing { height: 0; overflow: auto; margin: 0 ! Important; padding: 0 ! Important; } did not help

2

For smaller screens I usually use a div with the Table-Responsive class encompassing the table. I hope it helped.

Example:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

  • Welcome to Stack Overflow in English Daniel. This seems to be more of a comment than a response. It would be interesting to add more information and even an example so that it is a more complete and valid answer.

  • can specify more @Danielnicodemos?

  • Thank you for wanting to help! However you used the response field to make a comment. The answer field should only be used to post a solution to the problem posed by the question. You can post comments when you have more reputation points.

  • @Bia, I modified the above answer by putting an example on the class in the div :)

Browser other questions tagged css twitter-bootstrap css3

You are not signed in. Login or sign up in order to post.