jQuery Grid Plugin - jqGrid - Topic: pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size Simple:Press Version 5.7.5.3 kobruleht on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p28495 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p28495

scottw512 said:Thanks. I see what you mean and it's working now. I need to supply my own background-image and background-position for those classes

How to got it working ? Where to find bigger images? Im looking for a way to use button sizes like standard jquery ui buttons, in landscape layout: width is greater than height like buttons "Quote and reply", "Edit your post" etc in this forum.

Can we use same images but make buttons wider with times so that image is in center ? Or is it better to use special fint like font awesome icons ?

]]> Wed, 20 Mar 2013 18:12:41 +0200 scottw512 on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21209 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21209 Thanks. I see what you mean and it's working now. I need to supply my own background-image and background-position for those classes

]]> Tue, 07 Dec 2010 19:24:33 +0200 OlegK on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21206 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21206 The pager

Image Enlarger

has LAGRE icons 32×32. The file http://ajax.googleapis.com/aja.....sp;contain the lines

.ui-icon { width: 16px; height: 16px;
           background-image: url(images/ui-icons_469bdd_256x240.png); }
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }

The file http://ajax.googleapis.com/aja.....56x240.png

has following image:

Image Enlarger

So for example "Next" button defined as .ui-icon-seek-next { background-position: -32px -160px; } is the part of this image with the corresponding offset:

marked part of the imageImage Enlarger

if we interpret it as the 32×32 pixel image (see the change .ui-icon { width: 32px !important; height: 32px !important; } in my previous post). So the marked part of the image

Image Enlarger

is exactly the image.

So you should paint his own image with large icons which you want and define the classes ui-icon-seek-first,ui-icon-seek-prev,ui-icon-seek-next and ui-icon-seek-end so that they use this image. Then the problem will be solved.

Sorry, but I can not explain you the solution more detailed.

Regards
Oleg 

]]> Tue, 07 Dec 2010 18:54:27 +0200 scottw512 on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21203 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21203 When I go to your link, I see the next page and previous page icons but they are the same size as always. What is different is that I also see the images below next page and previous page from the 16x16 image file. This is the same result I saw when I changed the width and height in Firebug.

]]> Tue, 07 Dec 2010 16:50:19 +0200 OlegK on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21187 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21187 Yes in the way you can receive what you need. Just to verify my suggestion I included in my other jqGrid example the following CSS

<style type="text/css">
    .ui-icon { width: 32px !important; height: 32px !important; }
    .ui-jqgrid-pager { height: 32px !important; }
</style> 

You can see live here that as the result we have large icons in the pager. All the icons are consists from 4 icons. Nevertheless the pager of jqGrid work.

Just for better understanding. You must not redefine the image used by ui-icon class. You can change in the same way background-image, width and height in ui-icon-seek-first,ui-icon-seek-prev,ui-icon-seek-next and ui-icon-seek-end only. You can paint the image which consist only the 4 icons. You are free in you ways. Important is only that jqGrid use the classes ui-icon-seek-first,ui-icon-seek-prev,ui-icon-seek-next and ui-icon-seek-end and if you in any way define there with some large images jqGrid will use there.

Best regards
Oleg 

]]> Tue, 07 Dec 2010 01:08:34 +0200 scottw512 on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21186 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21186 From looking at Firebug, I see what you refer to with the ui-icon styles. I see the image png is with all the icons inside the jquery ui theme. So I would enlarge this to make the icons bigger and change the 16x16 offsets for seek-first, seek-next and so on?

]]> Tue, 07 Dec 2010 00:45:38 +0200 OlegK on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21185 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21185 jqGrid just used <span> elements which the CSS classes ui-icon,ui-icon-seek-first,ui-icon-seek-prev,ui-icon-seek-next and ui-icon-seek-end from jQuery UI. It you will change the classes so that there will has more large icons the icons will be displayed by jqGrid.

If you not know: the ui-icon class defines the background-image with many icons and the values width and height both equal to 16px. The other classes like ui-icon-seek-first and so on defines background-position-x and background-position-y inside the large background-image. This technique in common. Sharing of many icons in one image improve the performance of the image loading.

Best regards
Oleg 

]]> Tue, 07 Dec 2010 00:09:55 +0200 scottw512 on pager button size http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21184 Help http://www.trirand.com/blog/?page_id=393/help/pager-button-size#p21184 I've looked for a css setting that will specify larger pager buttons but don't see anything. Is there a simple way to do this?

Thanks,

Scott

]]> Mon, 06 Dec 2010 23:54:03 +0200