CODEWITHSUNDEEP
cssjqgridjqgrid-asp.netjqgrid-formatter
B R
B R

Reputation: 51

jQgrid 100% width

I have tried following code for 100% width of my jQgrid.

height: "100%",
autowidth: true,

And I have changed css - from fixed layout to auto (reference from another thread) to avoid unnecessary horizontal bar.

.ui-jqgrid .ui-jqgrid-htable {
   table-layout: auto;
   margin: 0em;
}

and 

.ui-jqgrid .ui-jqgrid-btable {
   table-layout: auto;
   margin: 0em;
   outline-style: none;
}

Now issue of horizontal bar is solved but I'm facing new issue in layout which is highlighted in the attached image.

What can I do to avoid this header width mismatch?

Click here for image.

Upvotes: 1

Views: 1854

Answers (2)

B R
B R

Reputation: 51

I have tried a lot but and even upgraded my jqGrid but it was not working. Still recently I tried latest(from GitHub - build date - 11/07/17) jqGrid and it resolved my issue..

Upvotes: 2

Oleg
Oleg

Reputation: 221997

Changing of table-layout to auto is absolutely wrong and it could be the origin of your problem. jqGrid hold column headers and the data in separate tables table.ui-jqgrid-htable and table.ui-jqgrid-btable. Setting table-layout: auto; will break column width in case of having long content in the grid. Nevertheless I think you have another problem, because the picture, which you included, has no long string.

One can solve your problem only if you would provide the demo, which reproduce the problem. I guess that real origin of your problem is not described in your question. I suppose that you increased the font-size and pagging and did it not full correctly. Typical error which I seen before was increasing of pagging of inside of main data (.ui-jqgrid tr.jqgrow > td) without making the same changes in the first hidden row .ui-jqgrid tr.jqgfirstrow > td or without changing the settings in the column headers .ui-jqgrid .ui-jqgrid-htable th.

I recommend you to examine the pagging and font-size of the first row of the column header (table.ui-jqgrid-htable) and the grid data (table.ui-jqgrid-btable). I guess that you directly of indirectly changes the setting holding the settings asynchronously (not the same in the column header and the the first row of the grid data).

Upvotes: 0

Related Questions