4

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.

LeftyX
  • 35,328
  • 21
  • 132
  • 193
  • Alternative solution : http://stackoverflow.com/a/11841957/1478467 – Sherbrow Sep 05 '12 at 16:58
  • @Sherbow: It's interesting. Let's see if someone comes up with something easier. Thanks, anyway. – LeftyX Sep 05 '12 at 22:50
  • Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/FortAwesome/FortAwesome.htm) from [the answer](http://stackoverflow.com/a/13865495/315935). I think it's what you wanted. – Oleg Dec 14 '12 at 05:53

1 Answers1

9

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks Oleg. your CSS does the job. Hope I won't find any trouble with some other features. – LeftyX Sep 07 '12 at 08:54