How can I center align text in jqgrid header group

Question

I am using the new header grouping feature of jqgrid 4.2 which works great except that it left aligns all of the text in the header groups.

How can align the header group text to be center in the cell?

Here is a screenshot to show you how it seems to be working by default: (I want "Books" to be center aligned")

NOTE: the regular column headers ARE center aligned.

enter image description here

score 8 · Answer 1 · answered Jan 06 '12 at 21:36

The header group cell is given special class .ui-th-column-header. However this class has no special styling, if anywere in your project you have set text-align to left for th elements (for example in ASP.NET MVC the site.css is doing this) the text will not be center aligned. In most situations adding this to your CSS should do the trick:

.ui-th-column-header
{
  text-align: center;
}

score 3 · Accepted Answer · answered Oct 19 '11 at 13:49

3

Sorry, but I can't reproduce the problem. The demo produce the following grid with the center alignment column headers:

enter image description here

If you would post your demo one can examine where is the problem's origin. I suppose that some other CSS which you make the problem.

answered Oct 19 '11 at 13:49

Oleg

220,925
34
403
798

can you think of what css id would drive the formatting of the group header as i must have some conflicting css? – leora Oct 19 '11 at 15:50
@leora: It's difficult to say. It's the same question as you asked me "How many money I have in my purse?". I can nothing say about the CSS which you use without have seen it. Could you post URL to the demo which reproduce the problem? If I would examine the real CSS which applied to the column header group I could answer on the question. – Oleg Oct 19 '11 at 15:57
fair enough . . i will try to reproduce an isolated example online. – leora Oct 19 '11 at 16:02
@leora: I would help you if I could, but I can't now. In my environment I don't have the problem. So if you would have an example, just post the URL to me and I will look inside. – Oleg Oct 19 '11 at 16:31

score 1 · Answer 3 · answered Sep 18 '14 at 07:49

1

I had the same issue but i found the solution. you give titleText within the html center tag

titleText: ' open center tag Books close center tag'

answered Sep 18 '14 at 07:49

Prashant

11
2

score 1 · Answer 4 · answered Sep 18 '17 at 10:37

1

I had to center align text in table head columns in jqgrid, after element inspection, the following worked in my case:

.ui-jqgrid-sortable {
    text-align: center;
}

Hope it helps someone.

answered Sep 18 '17 at 10:37

Harry .Naeem

1,245
3
20
33

score 0 · Answer 5 · edited Mar 07 '17 at 07:58

0

Try this,

$('.ui-jqgrid .ui-jqgrid-htable .ui-th-div').css('text-align', 'center');

edited Mar 07 '17 at 07:58

Gaurav Gandhi

3,041
2
27
40

answered Mar 07 '17 at 06:55

zerot86

1

score 0 · Answer 6 · answered Apr 19 '17 at 13:04

0

Inspect the element then , get the id of the element

    $('#jqgh_grid-table_CountryName').css('text-align', 'left');

answered Apr 19 '17 at 13:04

Asif Raza

971
6
14

H.Norouzi · Answer 7 · 2021-12-16T14:10:31.200

0

this work

  jQuery(grid_selector).jqGrid('setGroupHeaders', {
                useColSpanStyle: false,//or true
                groupHeaders: [
                    { startColumnName: 'colName', numberOfColumns: 2, titleText: '<center>your text</center>' }
                ]
            });

edited Dec 16 '21 at 14:10

answered Dec 16 '21 at 14:07

H.Norouzi

1
1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 16 '21 at 14:10

How can I center align text in jqgrid header group

7 Answers7

Linked