JQGrid - header and column not align

Question

Hope someone could point me to right direction..

I'm facing this problem for quite sometimes.!

http://imgur.com/j8S9ft5

I try some of the solutions which I found from stackoverflow

e.g.jqGrid column not aligned with column headers

& other sources but none solved my problem. This problem only arise after upgrading to Chrome 19 and above (I think!) and safari 6. I noticed theres no problem when viewed in my 2nd computer which is using safari 5 and when I reinstall Chrome ver 18.

I try updating some of the js and css file by downloading from trirand.net but come to no solution.

Currently I'm running Safari Version 6.0.1 (8536.26.14) and Chrome Version 26.0.1410.43.

thanks

UPDATE 2: after updating to 4.4.5 image http://imgur.com/NlY786x & I forgot to mention this only happen when I integrate inside lightbox(facebox)

UPDATE 3: @Oleg I just realise after after updating to 4.4.5 or just paste ur code (inside comment) I'm not able to use my custom button anymore (working b4).. nothing happen.

I'm using a javascript & a php jqgrid, below is my code:

<div align="center" id="grido"> </div>  
<script type="text/javascript">
 //var lastSel;
$(document).ready(function(){ 
//  $('#grido').load('form/housekeeping/dun_grid.php');
});
</script>

<script type="text/javascript">
<!-- dun_grid.js  --> 

jQuery(document).ready(function(){

  var lastSel;

 jQuery("#dun_grid").jqGrid({
  url:'form/housekeeping/dun_griddata.php',
  datatype: "json",
  colNames:['DUN ID','DUN Code', 'DUN Name'],    
  colModel:[
      {name:'int_dunid',index:'int_dunid', hidden:true, align:"center", width:50},
      {name:'txt_dcode',index:'txt_dcode', editable:true, align:"center", width:150},
      {name:'txt_dname',index:'txt_dname', editable:true, align:"center", width:150},

          ],
  pager: '#pagerdun', //pagination enable
  rowNum:15,
  rowList:[10,20,30],
  width:430,
  height:'auto',
  sortname: 'txt_dcode',
  sortorder: 'asc',
  hidegrid: false,  //show/hide  grid button on caption header

  viewrecords: true, //display the number of total records
  editurl:"form/housekeeping/dun.php?mode=edit",
  loadtext: "Loading Data, Please Wait...",
  rownumbers:true, // add row numbers on left side
  caption: '&nbsp; DUN List',


 ondblClickRow: function(id){
     if(id && id!==lastSel){ 
       jQuery('#dun_grid').restoreRow(lastSel); 
       lastSel=id; 
    } 
    jQuery('#dun_grid').editRow(id, true, "", refreshing); 
 },

  onSelectRow: function(id){ 
    if(id && id!==lastSel){ 
       jQuery('#dun_grid').restoreRow(lastSel); 
       lastSel=id; 
    }  
 },  


}); /* end of jqgrid */


    jQuery("#dun_grid").jqGrid('navGrid','#pagerdun',{edit:false, add:false, view:false, del:true, search:true}, 
      {}, // edit
      {}, // add
      {url: 'form/housekeeping/dun.php?mode=delete'},  // delete
      {multipleSearch : true},
      {closeOnEscape:true} 
      );  //end on navgrid

    jQuery("#dun_grid").jqGrid('navButtonAdd','#pagerdun',{caption:"", buttonicon :'ui-icon-plus', 

        onClickButton:function(id){
          jQuery('#dun_grid').restoreRow(lastSel);

              var datarow = {txt_dname:""};
              jQuery("#dun_grid").addRowData("0",datarow,"first");
              jQuery('#dun_grid').editRow("0", true, "", tiesto);
              lastSel=id;
          },//end of onClickButton
        title:"New Record", 
        position:"last"
        }); //end of custom button


function refreshing(id){ /* refresh grid */
    jQuery('#dun_grid').trigger("reloadGrid");
    $.blockUI({ message:"Saving Data!!"}); 
        setTimeout($.unblockUI, 700); 
    } 

function tiesto(){
    jQuery('#dun_grid').restoreRow(lastSel);
   jQuery('#dun_grid').trigger("reloadGrid");
    $.blockUI({ message:"New Data Saved!!"}); 
        setTimeout($.unblockUI, 700); 
    } 


});  /*end of document ready*/
</script>


<div align="center" class="gridpanel" >   
<!--------------------------- ## grid for add/edit ## ------------------------------------------>
   <table id="dun_grid" class="scroll" cellpadding="0" cellspacing="0"></table>
  <!-- pager definition -->
  <div id="pagerdun" class="scroll" style="text-align:center;"></div>

 </div> <!----------------------- grid panel end -------------------------------------->

PHP

<?php 
 ini_set("display_errors","1"); 
require_once('../../Connections/jq-config.php');

// include the jqGrid Class 
require_once  "../../phpgrid/php/jqGrid.php";
// include the driver class
require_once "../../phpgrid/php/jqGridPdo.php";
// Connection to the server 
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); 
 // Tell the db that we use utf-8 
$conn->query("SET NAMES utf8"); 

// Create the jqGrid instance 
$grid = new jqGridRender($conn); 
$grid->SelectCommand = 'SELECT int_bankid, txt_bank_code , txt_bank_name, txt_bank_address FROM tbl_bank'; 

// set the ouput format to json 
$grid->dataType = 'json'; 
$grid->table ="tbl_bank"; 
$grid->setPrimaryKeyId("int_bankid"); 

$grid->setColModel(); 
$grid->setUrl('form/housekeeping/bank_grid.php'); 
$grid->setGridOptions(array("editurl"=>"form/housekeeping/bank.php?mode=edit"));


// Set grid option
$grid->setGridOptions(array( 
    "caption"=>"&nbsp; List of Banks", 
    "rownumbers"=>true,
    "rowNum"=>10, 
    "rowList"=>array(10,20,50), 
    "sortname"=>"txt_bank_code", 
    "hoverrows"=>true,
    "hidegrid"=>false, 
    "height"=>'auto', 
    "width"=>460, 
        "sortorder"=>'desc', 
    "loadtext" => "meloading data...",
    "cmTemplate"=>array("searchoptions"=>array("sopt"=>array('eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc')))
    )); 

// Change some property of the field(s) 
$grid->setColProperty("int_bankid", array("label"=>"ID", "width"=>50, "align"=>"center", "hidden"=>true)); 
$grid->setColProperty("txt_bank_code", array("label"=>"Code", "width"=>60, "align"=>"center", "editrules"=>array("required"=>true))); 
$grid->setColProperty("txt_bank_name", array("label"=>"Name", "width"=>130, "align"=>"center", "editrules"=>array("required"=>true))); 
$grid->setColProperty("txt_bank_address", array("label"=>"Address", "width"=>200, "align"=>"center")); 

// enable navbutton 
$grid->navigator = true; 

    $grid->setNavOptions('navigator', array("pdf"=>false,"excel"=>false,"add"=>false,"edit"=>false,"del"=>true,"view"=>false )); 
    $grid->setNavOptions('del',array("url"=>"form/housekeeping/bank.php?mode=delete")); 

// jscript for adding new row       
 $reloading = <<<RELOAD
 function(id)
  {
     jQuery("#grid").trigger('reloadGrid');
  }
RELOAD;

 $mycode = <<<NEWBUTTON
 function(id)
  {
    jQuery("#grid").jqGrid('restoreRow',lastSel);
    jQuery("#grid").jqGrid('addRowData',"0",{txt_bank_code:''},"first");
    jQuery("#grid").jqGrid('editRow', "0", true,'',$reloading); 
    lastSel=id;
  }
NEWBUTTON;

//jscript for inline editing    
$editrow = <<<DOUBLECLICK
  function(rowid)
  {
      if (rowid && rowid !== lastSel) {
          jQuery("#grid").jqGrid('restoreRow', lastSel); 
          lastSel = rowid; 
      } 
         jQuery("#grid").jqGrid('editRow', rowid, true,'',$reloading); 
  }
DOUBLECLICK;

//custom button setting for adding new row
$buttonoptions = array("#pager", array("caption"=>"", 'buttonicon' =>'ui-icon-circle-plus', "onClickButton"=> "js:".$mycode));

// inserting custom button
$grid->setGridEvent('ondblClickRow', $editrow);
$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);
$grid->renderGrid('#grid','#pager',true, null, null, true,true); 
$conn = null; 


?>  

Solution

I had this same problem and was able to fix it by adjusting the CSS. I had set padding on the th which caused the issue.

It's possible that your th is inheriting padding which is messing up the alignment.

If the padding on the th is different than the grid cells (especially padding-left and right) it will break the alignment.

Comments

[aznan]

I' compiling my code into a simpler version; I updated my js but other problem arise, like what i have mention above.

[aznan]

the things is I have 2 places where i used jqgrid.. 1. on normal page... 2. on lightbox (facebox) which I see the problem...