jQuery Grid Plugin - jqGridForum

Topic RSS

Strange problem with css formating...

03/12/2009
13:18

Hans

Guest

Guests

Hi I am quite new to JS and the new fancy web2.0 stuff.

However I really like jqGrid, and it allready works using a combination of php and JSON.

But I have a really strange formatting problem. Everything looks nice except the little textfield where you can adjust the page number.

I am using the default jquery-ui css and jqgrid css files - I tried to remove this problem by myself, without success.

It would be great if one of you could help me.

"<input class="ui-pg-input" type="text" role="textbox" value="0" maxlength="7" size="2"/>"

Best regards,

Hans

03/12/2009
14:20

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Hans,

Welcome to jqGrid community!

To be a honest some other users reported this problem, but for now I do not know which causes this.

IMHO it depends on document structure.

It will be very goog if you have a link to the problem in order to investigate the problem.

In order to resulve currently your problem maybe you will need to define in the head section the following after loading jqGrid style sheet.

<style>

.ui-jqgrid .ui-pg-input { height:13px;font-size:1em; margin: 0em;}

</style>

Try to play with other values and see the result

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/12/2009
15:17

Hans

Guest

Guests

Hi tony,

thanks for your fast reply. It worked - the input is larger now. But right now the results info ( <div class="ui-paging-info" style="text-align: right;" dir="ltr">Zeige 1 - 3 von 12 795</div> ) is not readable anymore.

I do not have the project online so far, and there is no chance for me right now to upload it.

However I am going to describe the structure I applied.

1. Page with jquery ui tabs

Head: loading all the default css, js

-1 tab is the jqGrid table (loaded via ajax) additionally loading jqGrid css and js files.

Best regards,

Hans

05/12/2009
14:07

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Also you can send me the html file (if you want of course) in order to test

Thanks

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

26/12/2009
20:31

newuser

Guest

Guests

Tony,

Thank you for your dedication to this project. I have been searching through the forums and I have found this post. I wanted to align my table better right now it's all the way to the left, it looks very out of place. I am really new to web design, it is a hobby and I enjoy it very much. Anyhow I have tried

Your suggestion, I do see that the table inside gets adjusted as far as text size goes but I can't get it to move from the corner.

I am using <style>.ui-jqgrid .ui-pg-input { height:13px;font-size:1em; margin-left: 100px em;}</style>

26/12/2009
20:56

newuser

Guest

Guests

I was able to figure it out, messed around with ui.jqgrid.css particularly this line which seems to edit the entire outside border of the table

.ui-jqgrid{position:relative;left:285px;font-size:11px;}

I had to google up css relative, what relative does is it lets you specify left, top, bottom values so that you can manually position it.

21/11/2011
15:18

upland

Yorkshire, UK

Member

Members

Forum Posts: 3

Member Since:
17/11/2011

Offline

Hi,

I know this is an old post - but thought it was worth a shot....

btw - I am also new to jGrid .. and like it a lot. But I am also having the same problem with the same CSS as the poster above ... and it's now 2 years later!

I am not sure about the "position relative" fix mentioned previously ... and wondered if anyone has found anything else.

The strange thing is that I don't get the same problem with the example pages - though the fonts in my grid are much bigger generally than the example pages - so there is something going on with the CSS which I am trying to work through

Cheers,

Chris

23/11/2011
19:35

upland

Yorkshire, UK

Member

Members

Forum Posts: 3

Member Since:
17/11/2011

Offline

If I might add some further information regarding the css issue.

The url where it can be seen is http://www.upland.co.uk/hcs/

I have now corrected the font size in the rows of the grid by adding a class of "ui-jqgrid" to the table itself. But I still have the ongoing issue with CSS of the headings and the pager of the grid.

ie - pager and headings are too large ... and pager page number is misplaced.

Any advice would be appreciated.

This is viewing in Google Chrome

12/12/2012
17:00

artsaliva

Boca

New Member

Members

Forum Posts: 1

Member Since:
12/12/2012

Offline

newuser said:

Tony,

Thank you for your dedication to this project. I have been searching through the forums and I have found this post. I wanted to align my table better right now it's all the way to the left, it looks very out of place. I am really new to web design, it is a hobby and I enjoy it very much. Anyhow I have tried

Your suggestion, I do see that the table inside gets adjusted as far as text size goes but I can't get it to move from the corner.

I am using <style>.ui-jqgrid .ui-pg-input { height:13px;font-size:1em; margin-left: 100px em;}</style>

I have the same problem and I looked around till I found this forum. I am now playing around with that solution. I think it is going to work. Thanks.