JqGrid + twitter bootstrap (2.1.0): navbar navigation style

Question

I am trying to figure out how to fix this problem, but it seems I can not find a solution.

I am using jqGrid 4.4.1 (jQuery UI 1.8.23) and I just started using 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 who can try to help me fix this?
Are there any other issues I should be aware of?

Thank you for your help.

Answer 1

I think you should add 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 : demo from answer show how to use awesome font icons . This is probably what you wanted.