Responsive Download: hide columns based on the browser size (plug in not work on smart phones?)
Responsive Download: hide columns based on the browser size (plug in not work on smart phones?)
chessGuru64
Posts: 79Questions: 18Answers: 1
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.
This question has an accepted answers - jump to answer
Answers
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
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!