CODEWITHSUNDEEP
javascriptjqueryhtmlcssjqgrid
Matt
Matt

Reputation: 27001

jqGrid does not align properly in screen layout. What is missing?

In the example below, the 3 jqGrids don't align properly. I have created the HTML part like this:

<div>
  <h1>Grid 1</h1>
  <table id="Grid1"/>
</div>

<div>
  <h1>Grid 2</h1>
  <table id="Grid2"/>
</div>

<div>
  <h1>Grid 3</h1>
  <table id="Grid3"/>
</div>

The full code with JavaScript you can try out in the snippet below. Here's how the page is looking:

jqGridIssue

I'm expecting that it would show up like

Title 1
Grid1
Title 2
Grid2
Title 3
Grid3

but not mixed up like in the screen shot above. I also tried the same with <span>, inserting <br/> between the grids, adding style attribute with height property, all not successful.

How can this be fixed? Please help.

Code snippet to try it out:

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {
  var gridSampleData = [
      { id: 10, firstName: "Jane", lastName: "Doe1"},
      { id: 20, firstName: "Justin", lastName: "Time" }
    ];
  $("#Grid1").jqGrid({
    autowidth: true, height: 45, 
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
  $("#Grid2").jqGrid({
    autowidth: true, height: 45, 
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
  $("#Grid3").jqGrid({
    autowidth: true, height: 45, 
    colModel: [{name: "firstName"}, {name: "lastName"}],
    data: gridSampleData
  });
});
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

    <div>
      <h1>Grid 1</h1>
      <table id="Grid1"/>
    </div>

    <div>
      <h1>Grid 2</h1>
      <table id="Grid2"/>
    </div>

    <div>
      <h1>Grid 3</h1>
      <table id="Grid3"/>
    </div>

Upvotes: 0

Views: 134

Answers (2)

Syed Muhammad Munis Ali
Syed Muhammad Munis Ali

Reputation: 176

if you just wanted them to be in right place ? here is the answer but if you want anything else comment below and let me know .

   $(function() {
      var gridSampleData = [
          { id: 10, firstName: "Jane", lastName: "Doe1"},
          { id: 20, firstName: "Justin", lastName: "Time" }
        ];
      $(".any1").jqGrid({
        autowidth: true, height: 45, 
        colModel: [{name: "firstName"}, {name: "lastName"}],
        data: gridSampleData
      });
       $(".any2").jqGrid({
        autowidth: true, height: 45, 
        colModel: [{name: "firstName"}, {name: "lastName"}],
        data: gridSampleData
      });
       $(".any3").jqGrid({
        autowidth: true, height: 45, 
        colModel: [{name: "firstName"}, {name: "lastName"}],
        data: gridSampleData
      });
    });
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Canonical jqGrid example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

        <div class"awain">
          <h1>Grid 1</h1>
          <table class="any1"> </table>
        </div>
<br>
      
    <div class"awain">
          <h1>Grid 2</h1>
          <table class="any2"> </table>
        </div>
<br>

<div class"awain">
          <h1>Grid 3</h1>
          <table class="any3"> </table>
        </div>
<br>

Upvotes: 0

Tony Tomov
Tony Tomov

Reputation: 3277

Your html table definitions are not correct. The closing tag of the table is interpreted as closing div tag - to correct the problem fix your html like this:

<div>
  <h1>Grid 1</h1>
  <table id="Grid1"></table>
</div>

<div>
  <h1>Grid 2</h1>
  <table id="Grid2"></table>
</div>

<div>
  <h1>Grid 3</h1>
  <table id="Grid3"></table>
</div>

Enjoy

Upvotes: 1

Related Questions