Bootstrap Grid Layout to position jqgrids

QuestionsBootstrap Grid Layout to position jqgrids
Jack L asked 3 years ago

I'm trying to use Boostrap 3's grid layout to position 5 grids (3 interdependent context grids and 2 dependent [on the context] content grids using the same space but on separate tabs). The context grids would sit in the same row as the content grids in the first 2 columns except that 2 grids share column 2 with each having their own row so that they can stack. In fact, the 3 context grids are just single-column lists for selecting values. The third column, of course, holds the content grids. So one context grid in a .col-med-2, two stacked context grids in the next .col-med-2, and the content grids in a .col-med-8.

Unfortunately, the other grids don't appear to honor the Bootstrap layout. I'm including the /lib/js/jqrid/cs/ui.jqgrid.bs.css file after the bootstrap css file. The other grids appear in column 1 as though in their own top-level row. It appears that the display:block in the user agent stylesheet overrides the Bootstrap styling. It will layout properly if I use the float:left style on a containing div (though I can't get the grids in column 2 to stack), but I was hoping to avoid that usage by using the Bootstrap grid.

3 Answers
Abu Ghufran answered 3 years ago

Hi Jack,

I read your query many times …. but still i am not full clear.
If you can email me screenshot, it would help and sample code will ease in regenerating this issue.

email: [email protected]

Paolo L. answered 3 years ago

Your answer suggests that you don't understand the bootstrap layout grid (nothing like your grids, just a layout map) system, despite using it in a limited capacity for your own demos. It's simple. I have 5 grids (2 of which occupy the same space) that I'm trying to position using the bootstrap layout grid (again, an unfortunate collision of names).

<head>
<link rel="stylesheet" type="text/css" media="screen" href="lib/js/themes/redmond/jquery-ui.custom.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="lib/js/jqgrid/css/ui.jqgrid.css"></link>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="/lib/js/jqgrid/css/ui.jqgrid.bs.css">

<script src="lib/js/jquery.min.js" type="text/javascript"></script>
<script src="lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container"> <!– all bootstrap layouts in a bootstrap container –>
<div class="row"> <!– the master row –>
<div class="col-md-2"> <!– the first column for a context selection list, uses 2/12 of the space –>
<?php echo $out_list1> <!– the master context selector –>
</div>
<div class="col-md-2"> <!– the second column for two sub-context selection lists, stacked; also uses 2/12 of the space –>
<div class="row"> <!– to stack the next two lists, create rows in this column to put them in –>
<div class="col-md-12"> <!– all content must be displayed in a column, take up the entire width (of a 2/12 width column in the larger layout)>
<?php echo $out_list2> <!– the first sub-context selector –>
</div>
</div>
<div class="row"> <!– the second row that will place the next list below the previous list in the same column –>
<div class="col-md-12">
<?php echo $out_list3> <!– the second sub-context selector –>
</div>
</div> <!– second row –>
</div> <!– second column –>
<div class="col-md-8"> <!– the third column, uses 8/12 of the space, for the content for grids 4 and 5 that will eventually be placed in a tabbed panel, but just showing one for now –>
<?php echo $out_list4?>
</div>
</div> <!– master row –>
</div> <!– container –>
</body>

Abu Ghufran answered 3 years ago

Your code generate this output in BS3:
http://prntscr.com/e2tq57

There is a typo, html comment are not closed:

<div class="col-md-12"> <!– all content must be displayed in a column, take up the entire width (of a 2/12 width column in the larger layout)> ////// <————————–
<?php echo $out_list2> <!– the first sub-context selector –>
</div>

Your Answer

8 + 7 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating / 5. Vote count:

We are sorry that this post was not useful for you!

Let us improve this post!