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:
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
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
source to share