The columns list in jqgrid column chooser is showing up in a single column and getting truncated:
What can be done to solve this issue? This problem is happening in FireFox, Chrome, and IE. The page's definition is provided below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="jquery-ui-1.8.12.custom.css" type="text/css" title="ui-theme" />
<link href="ui.jqgrid.css" rel="stylesheet" />
<link href="ui.multiselect.css" />
<link href="Site.css" rel="stylesheet" />
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="jquery-ui-git.js" type="text/javascript"></script>
<script src="jqgrid/plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="jquery.contextmenu-fixed2.js" type="text/javascript"></script>
<script src="grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.jqGrid.src-multiselect1-deleteandsortpatches.js"></script>
<script src="json2.js" type="text/javascript"></script>
<script src="erp.js" type="text/javascript"></script>
<script type="text/javascript">
var $grid = $("#grid");
$(function() {
"use strict";
$grid.jqGrid({
...
$grid.jqGrid('navButtonAdd', '#grid_toppager', {
onClickButton: function () {
$(this).jqGrid('columnChooser', {
});
}
});