jQuery Grid Plugin - jqGrid - Topic: Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator Simple:Press Version 5.7.5.3 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p14013 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p14013 WOW! Thanks.  That was *exactly* it!  I changed the doc type from:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 loose.dtd">

And that took care of the issue!

Pete

]]> Mon, 18 Jan 2010 23:30:08 +0200 shah on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13920 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13920

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?

]]> Thu, 14 Jan 2010 22:26:53 +0200 mcurtis on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13822 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13822

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

]]> Wed, 13 Jan 2010 14:41:10 +0200 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13718 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13718 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

]]> Sat, 09 Jan 2010 22:51:50 +0200 tony on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13665 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13665 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

]]> Thu, 07 Jan 2010 20:57:09 +0200 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13626 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13626 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

]]> Thu, 07 Jan 2010 01:40:01 +0200 tony on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13538 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13538 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

]]> Sun, 03 Jan 2010 19:25:01 +0200 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13499 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13499 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.

]]> Sat, 02 Jan 2010 00:40:28 +0200 newperson on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13480 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13480 You know how to change the font size?

In your head section of your html add the following

<style> .ui-jqgrid {font-size:0.8em} </style>

Change the 0.8em to meet your needs.

]]> Thu, 31 Dec 2009 03:09:17 +0200 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13477 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13477 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

]]> Thu, 31 Dec 2009 00:08:18 +0200 tony on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13421 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13421 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.

]]> Tue, 29 Dec 2009 16:34:01 +0200 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13392 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13392 #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.  Smile

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!

]]> Mon, 28 Dec 2009 20:29:43 +0200 tony on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13378 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13378 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.

]]> Mon, 28 Dec 2009 18:16:44 +0200 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13373 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13373 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" });

}

]]> Mon, 28 Dec 2009 17:41:19 +0200 tony on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13368 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13368 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

]]> Mon, 28 Dec 2009 14:53:59 +0200 Pete on Correct width alignment of buttons and text in Navigator http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13354 Help http://www.trirand.com/blog/?page_id=393/help/correct-width-alignment-of-buttons-and-text-in-navigator#p13354 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?

]]> Sun, 27 Dec 2009 02:07:58 +0200