Jqgrid列标题按钮未正确显示

我在jqgrid（v4.4.4.4）列标题中有一个按钮和列名，我为我的列标题添加了样式。按钮和列名没有完全显示，而是部分显示

此处列标题值不正确。不确定哪里会出错。请帮助我实现显示完整的标题。谢谢

更新： 版本：v4.4.4.我的代码

    $(function () {
    var Role = $("#hiddenRole").val();
    $("#ProgramListGird").jqGrid({
        url: '/Home/programGrid',
        datatype: "json",
        contentType: "application/json; charset-utf-8",
        mtype: 'Get',
        colNames: ['id', 'Program', 'Unit', 'Active?', '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" id="addNewProgramId" value="Add New Program" onclick= "addNewProgram()"/>'],
        colModel: [
            { key: true, name: 'id', index: 'id', hidden: true },
            {
                name: 'ProgramDesc', index: 'ProgramDesc', editable: true
                ,editrules: { custom: true, custom_func: programDescValidation
                }
            },
            {
                name: 'UnitID', index: 'UnitID', editable: true, edittype: 'select',
                formatter: 'select', editoptions: { value: "Unit1:Unit1 ; Unit2/3:Unit2/3" },
                editrules: { custom: true, custom_func: dupicateRecordValidation
                }
            },
            {
                name: 'InActive', index: 'InActive', editable: true, formatter: 'select',
                stype: 'select', edittype: 'select', editoptions: { value: "false:No;true:Yes" }
            },
            {             

                sortable: false, align: "center", class: "button",
                formatter: function (cellvalue, options, rowObj) {                   
                    var cBtn = '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" value="Save Changes" onclick= "saveChanges(' + "'" + rowObj.id + "'" + '\)"/>'
                        return cBtn;

                }
            }
        ],
        pager: jQuery('#pager'),
        rowNum: 3,
        rowList: [3, 6, 9, 12],
        height: '100%',
        //width: outerwidth,
        //shrinkToFit: false,
        scrollerbar: true,
        viewrecords: true,
        caption: 'Program' + " " + Role,
        //loadonce: true,
        emptyrecords: 'No records to display',
        //editurl: '/Home/programGridSave',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "0"
        },
        hidegrid: false,
        autowidth: true,
        multiselect: false,       
        onSelectRow: function (id) {
            rowSelect(id);
        },

    }).navGrid('#pager', { edit: false, add: false, del: false, search: false, cancel: false, reload: false, refresh: false }),
    $("#ProgramListGird").jqGrid('inlineNav', '#pager',
        {
            edit: false, add: false, save: false, cancel: false, reload: false, refresh: false, restoreAfterSelect: false, 
        });
});

---

}

您使用的是4年前的复古版本4.4.4。你的问题主要是关于CSS问题。您使用哪个版本的jQuery UI和jQuery？哪个是你的主要网络浏览器？jqGrid 4.4.4是在Chrome 24、Firefox 18、IE9（IE10仅在Windows 8上）发布时发布的。我们现在有Chrome55、Firefox50.1、MicrosoftEdge 38和IE11。您认为在使用现代web浏览器的情况下，使用这种旧版本的jqGrid是个好主意吗？我强烈建议您将jqGrid 4.4.4更新为免费的jqGrid 4.13.5（或更新为4.13.6，该版本将在接下来的几天发布）。你不会遇到你试图解决的问题

您确实无法将jqGrid 4.4.4升级到更新的版本，然后您可以通过覆盖一些css规则来修复旧的

ui.jqGrid.css

：

.ui jqgrid.ui jqgrid htable th div{height:auto；}
.ui jqgrid.ui jqgrid htable th{height:auto；}

---

您可以包括

后面的规则编码>仅凭图片是帮不了你的。您应该发布您使用的代码，并包括有关您使用的版本和fork的信息。最有效的方法是发布JSFIDLE演示，它再现了问题。您可以在问题的答案中加入修改后的演示。@Oleg:谢谢您的反馈。请查找我的更新代码和版本。您使用的是4年前的retro版本4.4.4。你的问题主要是关于CSS问题。您使用哪个版本的jQuery UI和jQuery？哪个是你的主要网络浏览器？jqGrid 4.4.4是在Chrome 24、Firefox 18、IE9（IE10仅在Windows 8上）发布时发布的。我们现在有Chrome55、Firefox50.1、MicrosoftEdge 38和IE11。您认为在使用现代web浏览器的情况下，使用这种旧版本的jqGrid是个好主意吗？无论如何，我可以试着稍后（大约2小时后）帮你，因为我现在很忙。您主要需要修复旧

ui.jqgrid.CSS

@Oleg中的CSS规则：没问题，我会为您解答的。仅供参考，我使用的是IE11和VisualStudio2015，我从NuGet package Manager下载了jQuery.Jqgrid v4.4.4。请告诉我哪个版本的jqgrid将与IE 11一起使用，以获得更好的性能以及您的答案。谢谢。我建议您卸载旧的4.4.4 NuGet软件包，改用4.13.5。我现在就写我的答案，但如果您包括一个从

/Home/programGrid

返回的JSON数据示例（两行测试数据就足够了），我可以给您提供更多建议。此外，如果您没有非常大的数据集（例如>10000行），最好使用

loadonce:true

选项。太棒了。工作很好。谢谢。不确定为什么jqgrid图标在我的屏幕上重复。例如：自定义验证弹出关闭按钮被覆盖/复制。我在别人的帖子中引用了你的答案，但没有找到解决我问题的办法。谢谢

public JsonResult programGrid(string sidx, string sord, int page, int rows)    {
programModel.id = "001";
programModel.ProgramDesc = "A";
programModel.InActive = true;
programModel.UnitID = "Unit1";
programModelList.Add(programModel);

programModel = new ProgramModel();
programModel.id = "002";
programModel.ProgramDesc = "B";
programModel.InActive = true;
programModel.UnitID = "Unit1";
programModelList.Add(programModel);

int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var results = programModelList.Select(emp => new
{
    emp.id,
    emp.InActive,
    emp.ProgramDesc,
    emp.UnitID,
});
int totalRecords = results.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
if (sord.ToUpper() == "DESC")
{
    results = results.OrderByDescending(s => s.id);
    results = results.Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
    results = results.OrderBy(s => s.id);
    results = results.Skip(pageIndex * pageSize).Take(pageSize);
}
var jsonData = new
{
    total = totalPages,
    page,
    records = totalRecords,
    rows = results
};
return Json(jsonData, JsonRequestBehavior.AllowGet);