free-jqgrid / jqGrid

jQuery grid plugin
https://github.com/free-jqgrid/jqGrid
Other
480 stars 195 forks source link

Column width too small #468

Open uklimaschewski opened 5 years ago

uklimaschewski commented 5 years ago

I have an issue, when upgrading from jqgrid 4.6.0 to a newer version, e.g. 4.15.1.

I took one of your original fiddles and set it up to use 4.15.1: https://jsfiddle.net/6pos4d9g/

Then I made another one, using 4.6.0: https://jsfiddle.net/gur13w2t/3/

If you inspect the column widths, you will notice, that 4.15. widths are too small, they do not reflect the width given in the column model. E.g. first column "Client" has a width of 53 set in the model. In 4.6.0, the TH element of the header shows a correct width. In 4.15, the width is way too small. Also the height of the headers are smaller (17 instead of 22).

We are using column width extensively, we have hundreds of different tables out at our customers. And if we want to upgrade, they would have to adjust all their layouts, which is not a good way. I would expect to have a column width of 53 pixels, if I specify it in the model, not a width of 48.

I tried to adjust some of the CSS rules, but was without luck. It looks like the box-sizing changed somehow.

The data in 4.6.0 is not showing, but that is not my problem and I think, it has other reasons.

drucik commented 5 years ago

I checked size of column in 4.15.5 using your fiddle. It seems exactly 53 pixel wide: obraz Header seems to have the same width (48 content+4 padding + 1 px border): obraz

uklimaschewski commented 5 years ago

I have this on both, Chrome and Firefox when I inspect my two fiddles:

4.15.1: image image

4.6.0 image image

OlegKi commented 5 years ago

Sorry for the delay with the response. Free jqGrid changed CSS style of box-sizing since a long time. It uses box-sizing: border-box; (see here, for example), which solves many implementation problems existing, for example, in implementation of frozen columns, grouping ans so on. It's the same style like in Bootstrap and many other modern CSS frameworks.

If the total width of the grid is important for you, that you can use width option of jqGrid to have fixed width, which you need.