Responsive Download: hide columns based on the browser size (plug in not work on smart phones?)

chessGuru64

Using https://datatables.net/download/index I picked responsive which automatically hides columns as screen size changes using this code:

 ` <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/r-2.2.2/datatables.min.css"/>`

This worked as I moved the screen smaller on my computer; however, did not hide columns or give the cool setup with the circle buttons on a smart phone. Project link is here: https://databasetable-net.000webhostapp.com/

Is there an easy way to get the Responsive plug in to work on smart phones?

=========================================================

Also, less importantly, I noticed using <th class=hidden-xsor @media (max-width: 700px) {.hideClass{display:none;}} seems to only work for client-side and not server side.

The <th> header would hide but the data would still show up. Can I confirm if this is true?

Thanks.

colin

Hi @chessGuru64 ,

The Responsive extension only reduces the columns when there's no space to display them all. I just checked that link on my phone, and all columns are able to fit so no shrinking is needed. You can confirm that by putting extra columns in, or making a few of the columns particularly wide (long text is the easiest way), then you'll see it reduce.

Cheers,

Colin

chessGuru64

After experimenting with the viewport:

<meta name="viewport" content="width=1000, user-scalable=0" />

Solution: Changing the width on the above code to 300ish/400ish works really well!

After thinking about it longer, I was expecting an answer like yours. Thanks for the help!