Center Checkbox in Header

Question

I want to align: center the "select all" checkbox in the header. It is the first cell in the header of jqgrid.

I tried:

#configDiv th input[type="checkbox"] {
    margin: 0 auto !important;
}

and

grid.find('th input[type="checkbox"]').css("align", "center");

Those didn't work!

Any idea?

score 2 · Answer 1 · edited May 23 '17 at 11:49

2

Thanks to this answer from Oleg I found this;

grid.closest('div.ui-jqgrid-view').find('table.ui-jqgrid-htable th:first-child').css("text-align", "center");

edited May 23 '17 at 11:49

Community

1
1

answered Oct 18 '14 at 06:00

amanda chaw

137
2
14

worldofjr · Accepted Answer · 2014-10-18T04:56:55.790

1

Inputs, such as checkboxes, are inline elements and you can't centre them directly. You need to centre the "text" (I know a checkbox isn't text, but that is what the CSS rule is) in the parent element, in this case the th.

You can do that with the following code in your CSS;

#configDiv th {
    text-align: center;
}

If you need to target the particular th then you should add a class to the HTML and use the th.classname selector.

Hope this helps.

edited Oct 18 '14 at 04:56

answered Oct 18 '14 at 04:50

worldofjr

3,868
8
37
49

Can you post your HTML output (edit your question) so we can see if anything else is the problem. Don't post all of it, just the part around the checkbox. – worldofjr Oct 18 '14 at 05:02
I can't post image because I am new here! – amanda chaw Oct 18 '14 at 05:03
No, copy and paste the code when you right click the page and select View Source Code (or whatever it is in your browser). – worldofjr Oct 18 '14 at 05:04
Yes. Hence why you should only post the relevant part. Look (or seach using Ctrl+F) for ` – worldofjr Oct 18 '14 at 05:14

Center Checkbox in Header

2 Answers2