Forum
Log In
Home
Topic RSS
Related Topics
23:54
16/09/2009
Offline
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
00:09
10/08/2009
Offline
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
00:45
16/09/2009
Offline
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?
01:08
10/08/2009
Offline
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
.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
16:50
16/09/2009
Offline
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.
18:54
10/08/2009
Offline
The pager
has LAGRE icons 32×32. The file http://ajax.googleapis.com/aja.....sp;contain the lines
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:
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:
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
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
19:24
16/09/2009
Offline
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
18:12
05/05/2011
Offline
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 ?
Most Users Ever Online: 715
Currently Online:
69 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
