Forum
![sp_Feed](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_Feed.png)
![sp_TopicIcon](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_TopicIcon.png)
02:07
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
01/09/2008
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
I am trying to figure out how best to get the buttons I add with .navButtonAdd to properly display when I have very narrow columns. Lets say that I have two columns and they are 100 pixels each. When I render the grid, the columns display just fine but the three buttons I added to the navigator,which also has the pager, all get bunched over to the left and aren't readable. Even if I set the total grid width to 600 pixels, the text and icons in the footer of the grid are all bunched to the left.
Is there a way to set the width the area that the added buttons display in?
14:53
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/moderatordefault.png)
Moderators
30/10/2007
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Hello,
Check your code, especially the positions of the navigator buttons elements. When the pager is created we divide it in 3 parts and we try to put all the buttons (if there is available space for this)
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.
17:41
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
01/09/2008
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
I guess what I would expect is that the grid would be "expanded" to accomodate the buttons. That *might* result in an "empty" column area but as it is I need to try trial and error to get all the buttons and lables to display. Currently, the grid renders like this:
http://www.petesworkshop.com/i.....w_grid.jpg
Here is the code that creates the grid:
function loadGenericCodeTable(){
var lastsel;
var currsel;
var codeType = $('#codetablelist').val();
var rowSaved;
var jsonURL = '${.data_model.requestURI}?action=AjaxGetCodeTableList&listtype='+codeType;
var editURL='${.data_model.requestURI}?action=AjaxUpdateCodeTableListRow&listtype='+codeType;
// Dump the existing grid
$('#goCodeTables').GridDestroy();
var gridimgpath = 'stylesheets/themes/basic/images';
$('#goCodeTables').jqGrid({
url: jsonURL,
editurl:editURL,
cache: false,
datatype: 'json',
height: 250,
colNames:['Code', 'Message ID'],
colModel:[
{name:'crossReferenceCode',index:'crossReferenceCode', width:100, editable:true},
{name:'msgCode',index:'msgCode', width:130, editable:true}
],
rowNum:-1,
rowList:[10,20,30,40],
pager: $('#goCodeTablespager'),
sortname: 'crossReferenceCode',
onSelectRow: function(id){
currsel=id;
if(lastsel!=id){
if(id && (id != lastsel)){
saveRowData($('#goCodeTables'),lastsel,editURL);
$('#goCodeTables').editRow(id,true);
lastsel=id;
}
}
},
sortorder: "desc",
jsonReader: {repeatitems: false},
caption: "General Code Table"
});
if($('#goCodeTablespager').find('table').length==2) // skip if already present
$('#goCodeTables').navGrid('#goCodeTablespager',{ edit:false,add:false,del:false,search:false })
.navButtonAdd('#goCodeTablespager',{ caption:"Add", buttonimg:"stylesheets/themes/basic/images/row_add.gif", onClickButton: function(){ addEmptyRow($('#goCodeTables'))} , position:"last" })
.navButtonAdd('#goCodeTablespager',{ caption:"Del", buttonimg:"stylesheets/themes/basic/images/row_delete.gif", onClickButton: function(){ deleteRow($('#goCodeTables'),currsel)}, position:"last" })
.navButtonAdd('#goCodeTablespager',{ caption:"Save", buttonimg:"stylesheets/themes/basic/images/save.gif", onClickButton: function(){ saveRowData($('#goCodeTables'),lastsel,editURL)}, position:"last" });
}
18:16
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/moderatordefault.png)
Moderators
30/10/2007
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Hello,
1.Something is not correct with the html definition. See here what you need to put
in the html definition when using the grid
http://www.trirand.com/jqgridw.....to_install
2. How do you expect to put so many buttons on pager when you do not have enoght room for this?
Please set the width of the grid to greater value.
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.
20:29
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
01/09/2008
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
#1 - I'll take a look at the setup again. I'll make sure the correct files/structure is in place.
#2 - I think I expected the grid to figure out what the width needed to be based on everything I add to it and then display it. Yeah, I know, that is probably not a realistic expectation.
In this case, pushing the grid size to a minimum of 700 pixels allows for the buttons to properly display. That means that all of the grids I develop can be a minimum of 700 pixels so I can accomdate the buttons. This isn't a big deal, just took me a while to figure out.
I would recommend a different algorithm option for alignment. Maybe something like "balanced" or something. If you look at the grid, now that I have expanded it to 700 pixels, you can see that there is much white space to the right of the pager which, if everything moved right as the grid was reduced in size, would allow the grid to shrink by maybe 100 pixels.
http://www.petesworkshop.com/i.....grid_2.jpg
I guess what you are telling me is that the grid will adjust some but won't completely compensate by moving items to the right until it can all fit. I can live with that, I just wanted to make sure that I wasn't missing out on an easier way to get it all to fit.
Thanks!
16:34
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/moderatordefault.png)
Moderators
30/10/2007
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Hello,
From the picture provided here I see that something is not good. The font-size is too big. Plese take a look at the instalation instructions.
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.
00:08
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
01/09/2008
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Thanks. Yeah, the font sizing *does* seem wrong but I haven't been able to get it correct. Your instructions says to do this:
-
/myproject/css/
-
ui.jqgrid.css
-
/ui-lightness/
-
/images/
-
jquery-ui-1.7.2.custom.css
-
-
-
/myproject/js/
-
/i18n/
-
grid.locale-bg.js
-
list of all language files
-
….
-
-
Changes.txt
-
jquery-1.3.2.min.js
-
jquery.jqGrid.min.js
-
I am running a java servlet but the structure is really the same:
-
/webapp/stylesheets/
-
ui.jqgrid.css
-
/themes/redmond/
-
/images/
-
jquery-ui-1.7.2.custom.css
-
-
-
/webapp/scripts/js/
-
/i18n/
-
grid.locale-bg.js
-
list of all language files
-
….
-
-
- /webapp/scripts/
-
jquery-1.3.2.min.js
-
jquery.jqGrid.min.js
- Changes.txt
-
The HTML has the following entries:
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/ui.jqgrid.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="scripts/jquery.jqGrid.min.js"></script>
Not sure why it isn't rendering correctly. These entries are very similar to what you have (*I think*)
Pete
00:40
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
01/09/2008
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Thanks for that information.
Actually, changing the font isn't the issue. Tony noticed that the fonts looked wrong, indicating that perhaps something wasn't properly installed. I am not sure what the issue is but I am not concerned with the fonts except that their size seems to be affecting the placement of buttons on the navigator.
19:25
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/moderatordefault.png)
Moderators
30/10/2007
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Hello,
Try to use some other widgest from jQuery UI her and see the result. I'm sure they will appear in the same way.
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.
01:40
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
01/09/2008
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
I am not sure that is completely true but I still don't understand why the font is so big. There must a some css affecting it but even when I strip it down to the bare minimum, I still see the same font size.
Here is a shot of the datepicker and it doesn't seem to be affected by the font sizing on the grid.
http://www.petesworkshop.com/i.....shot_2.jpg
Pete
20:57
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/moderatordefault.png)
Moderators
30/10/2007
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Hello,
Without providing the link to the problem can not help. I feel that the grid css is not loaded - or at least the path to the css is wrong. Check this in FireBug - Net tab
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.
22:51
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
01/09/2008
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Thanks again Tony. What should I look for? Here is a shot of what Firebug shows:
http://www.petesworkshop.com/i.....shot_3.jpg
I'll see if I can get the grid posted to someplace outside the firewall so you can look at it.
Pete
14:41
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
11/01/2010
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
Pete said:
I am not sure that is completely true but I still don't understand why the font is so big. There must a some css affecting it but even when I strip it down to the bare minimum, I still see the same font size.
Here is a shot of the datepicker and it doesn't seem to be affected by the font sizing on the grid.
http://www.petesworkshop.com/i.....shot_2.jpg
Pete
Hi, it is my first answer here and I do not know if this should help, but i also had a problem with the font size, and I got rid of it changing the doctype…
<!doctype html public “… 4.01… loose.dtd”>
I don't really understand why it helped so…
You maybe have the same problem...
Michel
22:26
![Avatar](http://www.trirand.com/blog/wp-content/forum-avatars/defaults/userdefault.png)
30/12/2009
![sp_UserOfflineSmall](http://www.trirand.com/blog/wp-content/sp-resources/forum-themes/default/images/sp_UserOfflineSmall.png)
mcurtis said:
Post edited 14:42 – 13/01/2010 by mcurtis
Pete said:
I am not sure that is completely true but I still don't understand why the font is so big. There must a some css affecting it but even when I strip it down to the bare minimum, I still see the same font size.
Here is a shot of the datepicker and it doesn't seem to be affected by the font sizing on the grid.
http://www.petesworkshop.com/i.....shot_2.jpg
Pete
Hi, it is my first answer here and I do not know if this should help, but i also had a problem with the font size, and I got rid of it changing the doctype…
<!doctype html public “… 4.01… loose.dtd”>
I don't really understand why it helped so…
You maybe have the same problem…Michel
what excactly did u change?
Most Users Ever Online: 715
Currently Online:
42 Guest(s)
Currently Browsing this Page:
1 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