titlebar Text in einem jqGrid Zentrierung während des Öffnungs- / Schließtaste positioniert zu halten?

StackOverflow https://stackoverflow.com/questions/3079347

  •  28-09-2019
  •  | 
  •  

Frage

Ich möchte den titlebar Text auf einem jqGrid zum Zentrum, ohne das Öffnen / Schließen Bild vermasselt. Aber ich habe nur in der Lage gewesen zu bekommen beide der Text und die Öffnen / Schließen-Knopf-Bild zentriert. Ich würde für einige Tipps dankbar sein, wie der Text bekommen zentriert , während der Anker-Bild zu halten positioniert .

Hier ist das Markup, dass Chrome Inspector zeigt: 

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

Danke

War es hilfreich?

Lösung

Versuchen Sie, mit folgenden 

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

oder mit 

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

AKTUALISIERT : Ich sollte ein wenig fix meine Lösung zu 1) erlauben setCaption Verfahren weiter zu arbeiten; 2) korrekt zu arbeiten, wenn man mehr als eine jqGrid auf einer Seite hat: 

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

Im Code „Liste“ ist die ID des <table> Element des Gitters. DOM-Element von jqGrid (jQuery("#list")[0]) mit grid Eigenschaft erweitert, die als Ausgang Eigenschaften DOM-Elemente aus drei wichtigen Komponenten jqGrid (cDiv - caption, hDiv - Tabellenüberschriften und bDiv - Tischkörper). Wir verwenden .grid.cDiv DOM-Element der Beschriftung (Raster-Header) zu bekommen in dem meisten schnellen Weg. Dann geben wir ein span Element der Beschriftung und überschreiben "float: left" Stil der "ui-jqgrid-title" Klasse, die Sie wahrscheinlich am meisten Probleme gemacht. Am Ende haben wir zusätzlichen Stil des Mutter div Elements "text-align: center" alle Arbeiten fertig zu stellen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top