centering titlebar text in a jqGrid while keeping the open/close button positioned?
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
Solution
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.