centrage texte titlebar dans un jqGrid tout en maintenant le bouton d'ouverture / fermeture positionné?

Question

Je voudrais centrer le texte titlebar sur une jqGrid sans déconner l'image d'ouverture / fermeture. Mais je ne l'ai été en mesure d'obtenir à la fois le texte et le bouton image d'ouverture / fermeture centrée. Je vous serais reconnaissant de quelques conseils sur la façon d'obtenir le texte centré tout en gardant l'ancre image positionné .

Voici le balisage que l'inspecteur des spectacles de Chrome:

<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>

Merci

Answer 1

Essayez de suivre

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

ou

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

MISE À JOUR : Je un peu ma solution solution à 1) permettre à la méthode de setCaption continuer à travailler; 2) pour travailler correctement si l'on en ont plus d'un jqGrid sur une 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");

Dans le code « liste » est l'identifiant de l'élément de <table> de la grille. DOM élément de jqGrid (jQuery("#list")[0]) est élargie à la propriété de grid qui a pour propriétés DOM éléments de trois composants jqGrid importants (cDiv - légende, hDiv - en-têtes de table et bDiv - corps de table). Nous utilisons .grid.cDiv pour obtenir élément DOM de la légende (en-tête de la grille) la façon la plus rapide. Ensuite, nous donnons un élément span de la légende et le style de Ecraser "float: left" de la classe "ui-jqgrid-title" qui vous a probablement fait le plus problème. A la fin, nous fixons un style supplémentaire de l'élément de div mère à "text-align: center" pour terminer tous les travaux.