title: jqGrid Results over flow the grid and "Please, Select Row" message
body: <p>(I am relatively new to web programming so it may be an easily overlooked issue)</p>
  
  <p>I am using ASP.NET MVC4 to build an application which contains a razor view displaying a jqGrid.  It is dynamically getting the column meta data using ajax, and the data all seems to return fine.  When I run the app and the view is displayed, the data is shown but both the headers and body of the grid over flow the grid (see image).</p>
  
  <p><img src="https://i.stack.imgur.com/NfIa0.png" alt="Rendered Grid"></p>
  
  <p>I did notice that there appears to be a warning beneath the data stating "Please, select row".  My suspicion is the issue is either CSS or related to the warning.  I have tried changing various properties in the ui.jqgrid.css, site.css, etc to no avail.</p>
  
  <p>Here is the rendered html:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Feed List Preview&lt;/title&gt;
      &lt;link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="/Content/site.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="/Scripts/jquery-1.8.2.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  
      &lt;script src="/Content/themes/redmond/jquery-ui-1.9.0.custom.min.css" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Content/jquery.jqGrid/ui.jqgrid.css" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.jqGrid.src.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
      &lt;script type="text/javascript"&gt;
          var jqDataUrl = "LoadData";
          var jqMetaUrl = "GetColumnData";
  
          $(document).ready(function () {
              $.ajax(
                  {
                      type: "POST",
                      url: jqMetaUrl,
                      data: "",
                      dataType: "json",
                      success: function (result) {
                          col_names = result.colNames;
                          col_model = result.colModel;
  
                          $("#jqTable").jqGrid({
                              url: jqDataUrl,
                              datatype: "json",
                              mtype: "POST",
  
                              //Specify the column names
                              colNames: col_names,
  
                              //Configure the columns
                              colModel: col_model,
  
                              //Grid total width and height
                              width: 800,
                              shrinkToFit:false,
                              height: 400,
  
                              //Paging
                              toppager: true,
                              pager: $('#jqTablePager'),
                              rowNum: 25,
                              rowList: [25, 50, 100],
                              viewrecords: true, //Specify if total number of records is displayed
  
                              //Formatting
                              altRows: true
  
                              //Default Sorting (ignored)
  
                              //Grid Caption
                              //caption: "Feed List Preview"
                          }).navGrid("#jqTablePager",
                          { refresh: true, add: false, edit: false, del: false },
                          {}, //settings for edit
                          {}, //settings for add
                          {}, //settings for delete
                          { sopt: ["cn"] } //search options, Some options can be set on column level
                      )
                      },
                      error: function (x, e) {
                          alert("ReadyState: " + x.readyState + "; Status:" + x.status + "; Message:" + e.msg + ";");
                      }
                  });
          });
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="header"&gt;
          &lt;h1&gt;
              Header
          &lt;/h1&gt;
      &lt;/div&gt;
  
  
  
  
  &lt;h2&gt;Feed List Preview&lt;/h2&gt;
  
  &lt;div&gt;
      &lt;table id="jqTable" class="scroll"&gt;&lt;/table&gt;
      &lt;div id="jqTablePager" /&gt;
  &lt;/div&gt;
  
  
  
  
  
      &lt;script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>