CODEWITHSUNDEEP
htmlcssjqgrid
kamaci
kamaci

Reputation: 75147

jqGrid Table Width is Less than jqGrid Body

I use jqgrid and tableToGrid plugin to generate my web pages. I do not pass any option tableToGrid and do not have any css attributes at my table. My generated table code is that:

<div class="ui-jqgrid-bdiv" style="height: auto; width: 890px; border-left: 1px solid rgb(166, 201, 226);">
  <table cellspacing="0" cellpadding="0" border="0" class="ui-jqgrid-btable" id="elma" role="grid" aria-multiselectable="false" aria-labelledby="gbox_elma" style="width: 855px;">
    <tbody>
      <tr class="ui-widget-content jqgrow " role="row" id="1">
        <td title="Service ID" style="width: 129px;" role="gridcell">Service ID</td>
        <td title="Definition" style="width: 168px;" role="gridcell">Definition</td>
        <td title="Service" style="width: 110px;" role="gridcell">Service</td>
        <td title="Banned" style="width: 110px;" role="gridcell">Banned</td>
        <td title="Registration Date" style="width: 124px;" role="gridcell">Registration Date</td>
        <td title="Upload" style="width: 105px;" role="gridcell">Upload</td>
        <td title="Download" style="width: 109px;" role="gridcell">Download</td>
      </tr>
      <tr class="ui-widget-content jqgrow ui-priority-secondary" role="row" id="2">
        <td title="Sucuk" style="" role="gridcell">Sucuk</td>
        <td title="Yimirta" style="" role="gridcell">Yimirta</td>
        <td title="Service" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span>
        </td>
        <td title="NO" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span>
        </td>
        <td title="31-01-2014 13:05:49" style="" role="gridcell">31-01-2013 13:05:49</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
      </tr>
      <tr class="ui-widget-content jqgrow " role="row" id="3">
        <td title="Armut" style="" role="gridcell">Armut</td>
        <td title="Kedi Bacalari" style="" role="gridcell">Kedi Bacalari</td>
        <td title="Service" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span>
        </td>
        <td title="NO" style="" role="gridcell"><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span>
        </td>
        <td title="31-01-2014 13:05:49" style="" role="gridcell">31-01-2014 13:05:49</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
        <td title="0 (B)" style="" role="gridcell">0 (B)</td>
      </tr>
    </tbody>
  </table>
</div>

Screenshot is that:

Screenshot

As you see blue table header is bigger than inside. When you check the generated source code you will see that ui-jqgrid-bdiv has 890px but table has 855px. Table width is less than the usual.When I change 855px to 890px manually by Firebug everything seems OK.

Any ideas?

Upvotes: 1

Views: 890

Answers (1)

Oleg
Oleg

Reputation: 221997

You can just use height: "auto" option of jqGrid:

$(function() {
    tableToGrid("#elma", { altRows: true, height: "auto" });
});
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.7.0/js/jquery.jqGrid.src.js"></script>

    <table id="elma">
      <thead><tr><th>Service ID</th><th>Definition</th><th>Service</th><th>Banned</th><th>Registration Date</th><th>Upload</th><th>Download</th></tr></thead>
      <tbody>
        <tr>
          <td>Sucuk</td>
          <td>Yimirta</td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span></td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span></td>
          <td>31-01-2013 13:05:49</td>
          <td>0 (B)</td>
          <td>0 (B)</td>
        </tr>
        <tr>
          <td>Armut</td>
          <td>Kedi Bacalari</td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">Active</span></td>
          <td><span style="background:#018F3D; padding: 5px; color:#ffffff;">NO</span></td>
          <td>31-01-2014 13:05:49</td>
          <td>0 (B)</td>
          <td>0 (B)</td>
        </tr>
      </tbody>
    </table>

Upvotes: 1

Related Questions