jQuery Grid Plugin - jqGridForum

Topic RSS

help, grid has big fonts after install

22/10/2009
09:42

snorkel

Member

Members

Forum Posts: 15

Member Since:
22/08/2008

Offline

Hi,

I just installed the latest stable version using the redmond theme and it does not look like the example grids at all, the fonts are

huge and the pager has weird artifacts.

Here is a screen shot of what I mean:

http://www.milwaukeesoft.com/g.....xample.png

I looked through the css for the themes and didn't see anything weird.

Has anyone else seen this?

22/10/2009
11:34

John

Guest

Guests

Have you added styles, other then ui.jqgrid.css and the redmond ui files? If not try adding

html, body {
font-size: 75%;
}

Hope this helps.

snorkel said:

Hi,

I just installed the latest stable version using the redmond theme and it does not look like the example grids at all, the fonts are

huge and the pager has weird artifacts.

Here is a screen shot of what I mean:

http://www.milwaukeesoft.com/g.....xample.png

I looked through the css for the themes and didn't see anything weird.

Has anyone else seen this?

22/10/2009
12:38

snorkel

Member

Members

Forum Posts: 15

Member Since:
22/08/2008

Offline

John said:

Post edited 11:35 – 22/10/2009 by John

Have you added styles, other then ui.jqgrid.css and the redmond ui files? If not try adding

html, body {
font-size: 75%;
}

Yes, I have one other css file, and I thought that might be causing problems, so I removed it, refreshed everything and it still has the big fonts. I downloaded a new custom theme with a smaller font and no chage, I even edited ui.jqgrid.css and nothing.

23/10/2009
15:26

John

Guest

Guests

Strange. Let us know what browser, platform, version of JqGrid, etc. you are using for this one. Also, it could be associated with the order in which you are loading your style sheets. Anything in firebug that's telling? If you can, add another component (like a simple accordian) into the same page and see if it displays correctly or not. That can help narrow the cause.

24/10/2009
13:48

Carlos

Guest

Guests

John said:

Strange. Let us know what browser, platform, version of JqGrid, etc. you are using for this one. Also, it could be associated with the order in which you are loading your style sheets. Anything in firebug that's telling? If you can, add another component (like a simple accordian) into the same page and see if it displays correctly or not. That can help narrow the cause.

I have the same problem.

The page counter in pager has a small height.

http://www.carlosvita.com/jqgrid.jpg

This is a simple page without any extra CSS.

First I load the "redmond/jquery-ui-1.7.2.custom.css"

Then the "jqgrid/css/ui.jqgrid.css"

My Browser is Firefox 3.5.3 on Linux, but testing with Firefox on Windows I get the same result.

Internet Explorer 6 produces simillar result, having the page text box too smal but aligned to the bottom, like the screenshot that Snorkel showed us.

Carlos

26/10/2009
00:07

bottie

Guest

Guests

Hi,...

got the same problem... but jgrid demo seems works fine... the problem only appears when I run my own code. Has this is the code

<html>
<head>
<title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/recon/themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://localhost/recon/css/ui.jqgrid.css" />

<style>
    html, body {
font-size: 75%;
}
</style>

<script src="http://localhost/recon/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://localhost/recon/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://localhost/recon/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
    url:'conn003.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Date','Location','# of Trans','Type','Amount','Bank Stmt','Post Date','Diff','Remark','Type of Transfer'],
    colModel :[
      {name:'invno', index:'A', width:55},
      {name:'invdate', index:'B', width:90},
      {name:'amount', index:'C', width:80, align:'right'},
      {name:'tax', index:'D', width:80, align:'right'},
      {name:'total', index:'E', width:80, align:'right'},
      {name:'note', index:'F', width:150, sortable:false},
      {name:'tax', index:'G', width:80, align:'right'},
      {name:'total', index:'H', width:80, align:'right'},
      {name:'note', index:'I', width:150, sortable:false},
      {name:'note', index:'J', width:150, sortable:false}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: '1',
    sortorder: 'asc',
    viewrecords: true,
        imgpath: 'themes/redmond/images',
    caption: 'Payment vs Bank Transfer'
});
});
</script>
</head>
<body>
    <table id="list"></table>
    <div id="pager" class="scroll"></div>


</body>
</html>

27/10/2009
03:43

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Read carfully - the missing DOCTYPE causes this.

http://www.trirand.com/jqgridw.....to_install

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.

27/10/2009
05:22

Carlos

Guest

Guests

tony said:

Hello,

Read carfully – the missing DOCTYPE causes this.

http://www.trirand.com/jqgridw.....to_install

Regards

Tony

Thank you Tony. The problem is solved.

It's funny how a single simple line can make all the difference.

I must confess that I'm not used in paying to much attention to DOCTYPE and META tags...

Regards,

Carlos

24/11/2009
14:27

Guest

Guests

Also, being new to all this jQuery and jQueryUI business, I was including my jquery-ui-1.7.2.custom.css instead of ui.jqgrid.css but I think you're supposed to include both. Once I did, all my display issues went away, including the "loading..." message above the caption that I couldn't fix. Perhaps some of you are doing the same thing?

-Ed

13/09/2013
12:45

varunvyas

New Member

Members

Forum Posts: 1

Member Since:
13/09/2013

Offline

Hello all

I have also installed the jqGrid plugin version 4.5.2 and has followed steps exactly same as mentioned above, but i am also facing issue with big fonts in firefox, i am using firefox version version 24 on windows 7

Any suggestion

Thanks in advance