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?)

chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
edited January 11 in Free community support

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

  • colincolin Posts: 4,305Questions: 0Answers: 766
    Answer ✓

    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

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited January 11

    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!

Sign In or Register to comment.