jqGrid for Twitter Bootstrap [closed]

Question

I am working website, where I am using CSS framework "Twitter Bootstrap". Along with that I am using jqGrid for showing the grid data, but the problem is that jqGrid depends on jQuery UI, which conflicts with Bootstrap styles. Has anyone used jqGrid with jQuery UI and Bootstrap successfully?

Any examples/links are highly appreciated.

Thanks, Naren

Brindled

What you mean "styles are not in sync with bootstrap styles"? What problem exactly you have? Which jQuery UI Theme you use? – Hawserlaid

Check this out wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR – Merkel

Try jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/… – Endemic

"closed as not constructive" facepalm . How exactly is this question innapropriate. Come on. your just trolling Will. The guy was looking for directions on integrating jqgrid and bootstrap, thats exactly what stack overflow is for – Streptomycin

This question is constructive. I'm sure many others will be looking for the same answer. Maybe the English isn't perfect but that doesn't mean it's not constructive. Cool it with the marshall law on SO please... – Dempster

I have this issue too, and I think it's because jqGrid has some dependencies on jQuery UI, and having both jQuery UI and Bootstrap on the same web page usually results in some CSS conflicts. As in, the grid might look OK but the rest of the page is messed up. But if I get rid of jQuery UI, the rest of the page (once it's been styled for Bootstrap) looks fine but then the jqGrid is mostly un-styled and looks terrible. I edited the original question to make it a bit clearer that is is constructive. – Variolous

Answer 1

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
}

Joslyn