Align an icon vertically in jqGrid pager

Question

I have place a 24x24 png into the left pager of the jqgrid using the jquery code below. Also I'm applying vertical-align middle.

  $("#pager_left").append (
    '<td><div><img alt="" id="imgprint" src="images/word24x24.png"/></div></td>');
  $("#imgprint").css('vertical-align', 'middle');

The resulting html code captured from chrome developer tools is

The computed pager_left size is 214x28 + 1px padding above and below. The resulting pager_left is shown below where the icon is aligned at bottom and not in the middle. What am I doing wrong?

Answer 1

The structure of the pager is table oriented and very hard coded in jqGrid 4.6. The setting vertical-align will be not really help you because it's inside of deep hierarchy of other dives and cells which will be not vertically centered and some from there have fixed coded height in pixel.

First of all I would suggest you additionally to add empty navigator bar to be more confirm with the existing structure of the pager.

$("#grid").jqGrid("navGrid", "#pager", 
    { edit: false, add: false, del: false, refresh: false, search: false });

After that I would recommend you to define wordIcon class with the following CSS rules

.ui-jqgrid .ui-jqgrid-pager { height: auto; }
.ui-jqgrid .ui-pg-table { padding: 0 0 0 1px; }
.ui-pg-div .wordIcon {
    width: 24px;
    height: 24px;
    background-image: url("images/word24x24.png")
}

and use the code like

$grid.jqGrid("navButtonAdd", "#pager", {
    buttonicon: "wordIcon",
    caption: "",
    id: 
    title: "Export to Word",
    onClickButton: function(){
        alert("Export to Word is clicked!");
    }
});

The above code will work good event if you would add some standard icons (Reload Grid button for example) to the navigator bar. You will have the results like on the demo

Alternatively you can don't use navButtonAdd and hold your original code

$("#pager_left").append (
                '<div><img alt="" id="imgprint" src="http://ephtracking.cdc.gov/images/content/word-24x24.png"/></div>');

with the following CSS rules:

.ui-jqgrid .ui-jqgrid-pager { height: auto; }
.ui-jqgrid .ui-pg-table { padding: 2px 0 0 1px; }

You will have the results like on the demo: