Replies

• Caspian deConwy Posts: 15Questions: 2Answers: 0

  October 2019

  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 Posts: 61,650Questions: 1Answers: 10,094 Site admin

  October 2019

  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 Posts: 15Questions: 2Answers: 0

  October 2019 edited October 2019

  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 Posts: 20,269Questions: 26Answers: 4,765

  October 2019

  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 Posts: 15Questions: 2Answers: 0

  October 2019 edited October 2019

  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 Posts: 15Questions: 2Answers: 0

  October 2019

  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 Posts: 61,650Questions: 1Answers: 10,094 Site admin

  October 2019

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

  Allan