Jqgrid editable dropdown width set to minimum value in IE8

Hi I have a jqgrid with a popup menu for editing. Several editable properties are optional editable. This is sample code for one of the following options:

{ name: 'PaymentTypeLookupId', index: 'PaymentTypeLookupId', width: 150, align: 'center', editable: true, editrules: { required: true }, edittype: "select", editoptions: { dataUrl: '/Invoice/GetPayments/',
                  buildSelect: function (data) {
                      var response = jQuery.parseJSON(data);

                      var s = '<select>';

                      if (response.rows && response.rows.length) {
                          for (var i = 0, l = response.rows.length; i < l; i++) {
                              var ri = response.rows[i];
                              s += '<option value="' + ri.Id + '">' + ri.Name + '</option>';
                      return s + "</select>";


This works great in IE8 when it is configured for compatibility mode. However, if not in quirks mode, the dropdown has a really small width until you click on it to select an option and it sets a nice size:

enter image description here

There are items in the Payment Type dropdown, but until you click on it, the width will be as shown.

Does anyone know about this?


source to share

1 answer

I tried to reproduce the problem you described, but without any success. The demo in which I was explicitly using jqGrid 4.1.1 completed the form edit dialog without any problem.

You should prepare a demo that can be used to reproduce your problem. As a workaround, you can explicitly set width

to select:

{ name: 'PaymentTypeLookupId', ...
    editoptions: {
        dataUrl: '/Invoice/GetPayments/',
        buildSelect: function (data) {
        style: "width: 150px"


see demo



All Articles