Jqgrid Style Issue with Twitter Bootstrap

JQgrid style issue with Twitter Bootstrap

You should post always not only the description what you do, but the code (HTML, JavaScript etc) which shows how you try to do this.

If you want place jqGrid on the page which use mostly Twitter Bootstrap I would recommend you to use special jQuery UI: jQuery UI Bootstrap.

If you do prefer to use some other jQuery UI CSS you can download the CSS which you need from the official jQuery UI download page, but set some class name inside of "CSS Scope:" field:

If you enter for example ".myjqueryUI" in the "CSS Scope:" field then you need place the <table> which you will use for jqGrid inside of <div> having "myjqueryUI" class:

<div class="myjqueryUI">
    <table id="grid"></table>
</div>

jqGrid + twitter bootstrap (2.1.0): navbar changes style

I think you should includes additional CSS styles like

input.ui-pg-input {
    width: auto;
    padding: 0px;
    margin: 0px;
    line-height: normal
}
select.ui-pg-selbox {
    width: auto;
    padding: 0px;
    margin: 0px;
    line-height: normal
}

​see http://jsfiddle.net/ZHRaD/14/

UPDATED: The demo from the answer show how to use Font Awesome icons. It's probably what you wanted to have.

jqGrid for Twitter Bootstrap

You can use "Datatables" for Bootstrap

http://www.datatables.net/blog/Twitter_Bootstrap_2

or simply Bootstrap table styles

http://twitter.github.com/bootstrap/base-css.html#tables

But if you want to use jqGrid anyway, you must add that css classes to resolve some style conficts

input.ui-pg-input {
    width: auto;
    padding: 0px;
    margin: 0px;
    line-height: normal
}
select.ui-pg-selbox {
    width: auto;
    padding: 0px;
    margin: 0px;
    line-height: normal
}

Twitter Bootstrap Button Dropdown in jqGrid row

Your question look similar to this one https://stackoverflow.com/a/11067115/1416911

There's several solution (thanks to the bounty) to deal with the dropdown overflow issue.

Look at @ScottS answer in particular.

Select2 v4 in jqGrid edit modal window issue

I posted the answer on the issue already, but because more people read steckoverflow I repeat here the main information.

jqGrid uses jqModal.js module by default for form editing. The modal jqModal.js register keypress keydown mousedown event handler on the document element (see here) which can block the pressed key and to set the focus on the first visible input element of the edit form (see the line). One can solves the problem is two ways. The most simple way would be to

$.fn.jqm = false;

which prevent usage of jqModal.js module. If one included jQuery UI js file then jqGrid will use jQuery UI modal in the case. It's the most simple way to solve the problem.

Alternatively one can add the class jqmID1 (or jqmID appended with another index) to the container of select2. One can find the corresponding code example in the comment. The demo works in Google Chrome at least. It demonstrates mostly the reason of the strange behavior of select2 inside of form editing. The recommended way would be just use jQuery UI modal or don't use modal: true option.

UPDATED: I thought about the problem and have found even better solution. I remind me that one had close problem with processing of mouse events in jqModal.js and I posted the fix many years ago which are included already in old version of jqGrid. The fix consist from testing absolute position of mouse cursor and if it was inside of the area of modal dialog then the mouse event was allowed.

So I had the idea to modify jqModal.js for making close tests for keyboard events too. I posted the corresponding changes to free jqGrid (see here) and now select2 have no problems. See http://jsfiddle.net/191no21j/13/.

What is difference between the bootsrap grid and jqgrid?

jqgrid and bootstrap grid is totally different thing, but you can apply bootstrap grid is jqgrid, but it doesn't make sense.

=========================================
jqgid
jqgrid is kind of functionality in which you pass json data in url, and it automatically create table structure(called jqgrid), in which it provide searching, sorting, grouping functionality. jqgrid examples you found here

bootstrap grid

webpage is divided into 12 parts, and according to that how you allocate space is something like bootstrap grid, like col-md-4 , col-xs-4, col-lg-4 are the types as per device screen.
example of bootstrap grid, you found here

---

Related Topics