Responsive not working at all

Caspian deConwy

Hi,

started to work with DataTables and after a while I noticed that the responsive layout does not work at all.
I started from scratch, just putting in the CSS and JS files from the generator and put in my data, but I do not get a responsive layout.

Can you please tell me what I'm doing wrong?

https://jsfiddle.net/8mpdv02h/1/

Caspian deConwy

Meanwhile I noticed that the table seems to be responsive if I make the browser window smaller; however on a smartphone it's still not responsive but just "100 % view".

allan

There is a JS error in your example since Editor is not being loaded, which prevents all the remaining JS in that block from executing:

Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

Removing the Editor stuff and the ajax option, it works as expected: https://jsfiddle.net/8xyf6h14/ .

Allan

Caspian deConwy

Thank you - and sorry. That was a mistake coming from the fiddle.

Here's a demo, where I don't receive an error in the console: https://www.lancii.de/temp/edit.php

The actual issues I have on a smartphone:
- the table seems to be shown in full size ("desktop view") => small font/hard to read
- the edit modal/popup zooms on to a selected input field as it is also in full size. This makes it very inconvenient to edit

Both is not the case on the live example on https://editor.datatables.net

kthorngren

Your text is wrapping in the cells. Looks like you need to add nowrap to your table as described in the Responsive docs.

Kevin

Caspian deConwy

Unfortunately it does not change anything.

On desktop the table seems to switch into "mobile view" once the windows is smaller than ~950 px.

I meanwhile also tried to work with breakpoints, but I do not get "responsiveness" on my smartphone. Like in the documentation

or aggressive like

responsive: {
  breakpoints: [
    { name: 'desktop', width: Infinity },
    { name: 'phone',  width: 2000 }
  ]
},

Caspian

Caspian deConwy

Found it, I had to add the mobile specific meta information in the header ]:o

<meta name="viewport" content="width=device-width,initial-scale=1">

allan

Ah ha! Thanks for posting back. Good to hear you've got it sorted .

Allan