Why size property in editoptions property of free-jqgrid doesn't get honored?

Question

When the HTML size property of the editoptions property of free-jqgrid column model is set, it doesn't modify the related input width element as it should.

Whatever is the size value you set in editoptions, the input element width on an add or edit dialog box remains unchanged, having the maximum width possible within the dialog containing it.
It is remarkable to see that, if you inspect the HTML element using you browser inspection tool, it has the width property you set.

As I'm migrating from jqgrid 4.6.0 to free-jqgrid 14.15.4, it is important that this property should work the same way as it did before in order to keep the layout of the editing dialogs with no modification.

You can see a JSFiddle snippet of code.

In that code, line 6 sets the size of the field id to 3 characters. When trying to edit any record, it can be seen that all input fields have the same width, which is as broad as possible up to the right margin of the containing dialog.

How can input field sizes on the add or edit dialog of a free-jqgrid be defined ?

$(function() {
  "use strict";
  $("#grid").jqGrid({
      colModel: [{
          name: "id",
          width: 20,
          editable: true,
          editoptions: {
            size: 3 // doesn't get honored
          }
        },
        {
          name: "firstName",
          width: 200,
          editable: true
        },
        {
          name: "lastName",
          width: 200,
          editable: true
        }
      ],
      data: [{
          id: 10,
          firstName: "Angela",
          lastName: "Merkel"
        },
        {
          id: 20,
          firstName: "Vladimir",
          lastName: "Putin"
        },
        {
          id: 30,
          firstName: "David",
          lastName: "Cameron"
        },
        {
          id: 40,
          firstName: "Barack",
          lastName: "Obama"
        },
        {
          id: 50,
          firstName: "François",
          lastName: "Hollande"
        }
      ],
      pager: true,
      pgbuttons: false,
      pginput: false,
      viewrecords: true,
      pagerRightWidth: 90
    })
    .jqGrid('navGrid', {
      edittext: 'Edit',
      addtext: 'Add',
      deltext: 'Del',
      search: false,
      view: true,
      viewtext: 'View',
      refresh: true,
      refreshtext: 'Refresh'
    });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>

Answer 1

The problem is solved by overriding in css/ui.jqgrid.css file the width property setting for a .FormElement class inside a .ui-jqdialog-content class in the following way:

.ui-jqdialog-content .FormElement {
    width: initial;
}

You can see the modified JSFiddle code

Explanation

There is a difference between jqgrid and free-jqgrid when it comes to set properties of .FormElement class

/* jqgrid 4.6.0 css/ui.jqgrid.css line 112 */
.ui-jqdialog-content input.FormElement {padding:.3em}

/* free-jqgrid 4.15.4 css/ui.jqgrid.css line 935 */
.ui-jqdialog-content .FormElement {
  width: 100%;
  box-sizing: border-box;
}

The line width: 100% causes all input inside an edit dialog to be as broad as possible, ignoring size property.
This can be solved by overriding witdh: initial as shown before.