How to resize form fields for mobile using Editor?

bblumedtr

The forms look great by default on desktop. However, on mobile,
1) The fields become tiny and hard to read.

2) Clicking in one of them to enter data (Chrome on Android) causes a jarring zoom that hides all the field names.

Is there a batteries-included way to make the forms respond better on mobile?

If not, I think the desired behaviour would be:
Adjust the size of the grey header and footer bars to match the size of the field label + field input, so that you're using all of your screen real estate productively. Something like this (forgive me):

Additionally, the field inputs and labels could be adjusted to make use of any available width.

allan

What version of Editor are you using there? I've just tried our base example and it works okay on mobile. There are things that can be improved I think, but the fields do layout better - for example they stack.

One possibility might be that you have "Request desktop site" enable in the mobile browser?

Allan

bblumedtr

Indeed, the example you posted does look a lot better.

These are the library versions I'm using:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="{% static "js/DataTables-1.11.5/css/jquery.dataTables.min.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "js/Buttons-2.2.2/css/buttons.dataTables.min.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "js/Select-1.3.4/css/select.dataTables.min.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "js/DateTime-1.1.2/css/dataTables.dateTime.min.css" %}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{% static "js/Editor-2.0.7/css/editor.dataTables.min.css" %}">

<style class="init">
</style>

<script type="text/javascript" src="{% static "js/DataTables-1.11.5/js/jquery.dataTables.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/Editor-2.0.7/js/dataTables.editor.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/Editor-2.0.7/js/editor.dataTables.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/Buttons-2.2.2/js/dataTables.buttons.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/Select-1.3.4/js/dataTables.select.min.js" %}"></script>
<script type="text/javascript" language="javascript" src="{% static "js/DateTime-1.1.2/js/dataTables.dateTime.min.js"%}"></script>

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

and, no, I'm not using "Request desktop site".

Is it possible any of these libraries are interfering with the mobile optimization?

bblumedtr

I've paired down the code to the bare minimum:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="/static/js/DataTables-1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/static/js/Buttons-2.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/static/js/Select-1.3.4/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/static/js/DateTime-1.1.2/css/dataTables.dateTime.min.css">

<link rel="stylesheet" type="text/css" href="/static/js/Editor-2.0.7/css/editor.dataTables.min.css">

<style class="init">
</style>
<script type="text/javascript" src="/static/js/DataTables-1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/static/js/Buttons-2.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/static/js/Select-1.3.4/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="/static/js/DateTime-1.1.2/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="/static/js/Editor-2.0.7/js/dataTables.editor.min.js"></script>
<!-- <script type="text/javascript" src="/static/js/Editor-2.0.7/js/editor.dataTables.min.js"></script> -->
<body>
  <table id="batches" class="Display" cellspacing="0" style="width:100%">

    <thead>
      <tr>
 
          <th>batch_id</th>
        
          <th>count</th>
        
          <th>length</th>
        
      </tr>
    </thead>
  </table>

<script class="init">
    var editor;
    var table;
    $(document).ready(
      function () {
        editor = new $.fn.dataTable.Editor({
          ajax: {
            url: "/api/batch_rest/" + "editor/?format=datatables",
          },
          table: "#batches",
          idSrc:  'pk',
          fields: [
              
            
            {
              label: "batch_id",
              name: "batch_id"
            }, 
            
            {
              label: "count",
              name: "count"
            }, 
            
            {
              label: "length",
              name: "length"
            }, 
            
            
        ]
    });

    table = $('#batches').DataTable({
      dom: "Bfrtip",
      'serverSide': true,
      "ajax": {
        "url": "/api/batch_rest/" + "?format=datatables",
      },

      'columns': [

          {"data": "batch_id"},
            
          {"data": "count"},
            
          {"data": "length"},
            
      ],
      buttons: [
        { extend: "create", editor: editor },]
    })
    })
    ;
  </script>
</body>

This is what I get when I click on the "new" button:

And this is what I get when I zoom out.

I've tried with both a Pixel 3 and a Pixel 6. Same results.

Any thoughts?

allan

There is nothing obvious there. Are you able to give me a link to your page so I can debug why the responsive view isn't kicking in please?

One thing that does spring to mind though - do you have a viewport meta tag in your HTML?

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

If not, add that.

Allan

bblumedtr

One thing that does spring to mind though - do you have a viewport meta tag in your HTML?

I don't. Should I?

Are you able to give me a link to your page so I can debug why the responsive view isn't kicking in please?

Yeah - I'll set up a link for you today.

bblumedtr

If not, add that.

Sorry, missed this in my earlier reply and can't edit it. (new account limitation?)

Thank you! This did the trick.

I love all the examples available for Datatables. However, it's easy to miss things like this when the code is just in the snippet blocks at the end of the example page. Is there a way to view the examples on their own pages without all the tutorial text and the rest of the datatables.net content?

allan

Good stuff

Is there a way to view the examples on their own pages without all the tutorial text and the rest of the datatables.net content?

Yes - download and install the examples packages. They have the information text about each example, but not all the other stuff from the site.

Allan