Question

I would like to center the titlebar text on a jqGrid without messing up the open/close image. But I’ve only been able to get both the text and open/close button-image centered. I would be grateful for some tips on how to get the text centered while keeping the anchor-image positioned.

Here’s the markup that Chrome’s Inspector shows:

<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
   <a role="link" href="javascript:void(0)"
      class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px;">       
       <span class="ui-icon ui-icon-circle-triangle-n"></span>
   </a>
   <span class="ui-jqgrid-title">Titles</span>
 </div>

Thanks

Answer 1

Try with following

jQuery(".ui-jqgrid-title").replaceWith('<div style="text-align: center;"><span>' +
        jQuery(".ui-jqgrid-title").text() + '</span></div>');

or with

jQuery(".ui-jqgrid-title").replaceWith(
    '<div style="text-align: center; padding: .3em .2em .2em .3em;"><span>' +
    jQuery(".ui-jqgrid-title").text() + '</span></div>');

UPDATED: I should a little fix my solution to 1) allow setCaption method continue working; 2) to work correct if one have more as one jqGrid on a page:

var captionDiv = jQuery("#list")[0].grid.cDiv;
var titleSpan = jQuery(".ui-jqgrid-title",captionDiv);
titleSpan.css ("float", "none");
titleSpan.parent().css ("text-align", "center");

In the code “list” is the id of <table> element of the grid. DOM element of jqGrid (jQuery("#list")[0]) is expanded with grid property which has as a properties DOM elements of three important jqGrid components (cDiv – caption, hDiv – table headers and bDiv – table body). We use .grid.cDiv to get DOM element of the caption (grid header) in the most quick way. Then we give a span element of the caption and overwrite "float: left" style of the "ui-jqgrid-title" class which probably made you the most problem. At the end we set additional style of the parent div element to "text-align: center" to finish all work.