Responsive not working at all

Responsive not working at all

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

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/

Replies

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

    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".

  • allanallan Posts: 52,497Questions: 1Answers: 8,012 Site admin

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

  • kthorngrenkthorngren Posts: 10,229Questions: 25Answers: 2,334

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

    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">
    
  • allanallan Posts: 52,497Questions: 1Answers: 8,012 Site admin

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

    Allan

Sign In or Register to comment.