0

I am facing an issue where the child column widths are less than that of header column width. As a result the alignments looks pretty nasty. I've tried playing around with the ui.jqgrid.css:

  • .ui-jqgrid .ui-jqgrid-hdiv
  • .ui-jqgrid .ui-jqgrid-hbox
  • .ui-jqgrid .ui-jqgrid-htable .ui-jqgrid
  • .ui-jqgrid-htable th

I've also tried the solutions mentioned in :

Unfortunately none of those solutions work. I am using Jqgrid 4.5 version.

The workaround I am using at the moment is to remove the borders for the header using:

ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header

I am attaching the screenshot to make it more clear. Has anybody faced this issue?

Screen shot

Community
  • 1
  • 1
avijendr
  • 3,958
  • 2
  • 31
  • 46
  • 1
    I suppose that you have some conflicts with *other CSS* from your project. I suppose that the options changes for example padding in the column headers. Do you have some demo online which reproduces the problem? – Oleg Nov 22 '13 at 12:16

1 Answers1

0

Thanks @Oleg. But there wasn't any other css which was conflicting. The issue was when you add border to the data table and it pushes 1 or 2 pixels away. And apparently the header will stay at the original position (1 or 2 pixels away left of the data column). So the idea is to add the same border and make the padding a -2pixels.

So changes:

.ui-jqgrid .ui-jqgrid-htable th {height:22px;padding: 0 2px 0 -2px;}

and then add a left border to:

.ui-jqgrid .ui-jqgrid-htable {table-layout:fixed;margin:0;border-left: 1px solid #d3d3d3 !important;}

Now all the alignments all fine.

I am still wondering why the header and data are two tables. I believe it's a bit awkward design unless there is a strong reason! Maybe Oleg can answer.

avijendr
  • 3,958
  • 2
  • 31
  • 46