jqGrid + twitter bootstrap (2.1.0): navbar changes

Question

I am trying to figure out how to fix this problem but I don't seem to be able to find a solution.

I am using jqGrid 4.4.1 (jQuery UI 1.8.23) and I've just started to use twitter bootstrap.
As you can see in this fiddle the navigation bar is messy.
The page selector element is much longer than it should be.
This is a fiddle with jqGrid without twitter bootstrap.

Is there anyone out there who can try to help me to fix this?
Are there any other issues I should be aware of?

Thanks for your help.

Answer 1

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.