0

I have a jqGrid table. When it is loaded with data table width becomes larger and I have large width columns.

I do not want table's width changes and I want fixed size columns with wrapping property (if value exceeds column width it should be broken and should be continued at new line). How can I do that?

I tried that CSS:

<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px;
    }
</style>

and I use that:

tableToGrid("#tableId",{caption:"cap",shrinkToFit:false, autowidth:true})

However table's size is bigger than its parent and also every component of my HTML page?

EDIT: I have found that I override white-space property of jqGrid but ie does not works properly. When I debug the CSS I get that:

before

as you see white-space is overriden. When I explicitly uncheck the white-space property of jqGrid as follows:

after

it works as expected for me.

kamaci
  • 72,915
  • 69
  • 228
  • 366
  • 1
    It could be important which kind of wrapping you want to have. Look at the following answers: [this](http://stackoverflow.com/a/6915486/315935), [this](http://stackoverflow.com/a/3006134/315935), [this](http://stackoverflow.com/a/7256972/315935), [this](http://stackoverflow.com/a/16787770/315935). Probably one from the old answers solves your problem. Usage of the option `shrinkToFit: false` or placing `fixed: true` in `colModel` could prevent changing of width of columns in other scenarios. – Oleg Jul 17 '14 at 14:35
  • None of them worked. What I want is table should not have a greater size than its parent and columns should have a relative size to each other and the text inside cells should wrap due to see everyhthing inside it. – kamaci Jul 18 '14 at 08:22
  • default value `shrinkToFit: true` force resizing of the column to the relative size to each other. Usage of `width` with the value of number in px of its parent width (or the usage of `autowidth: true`) will do the work. The last thing is wrapping. You need just specify CSS rule to `.ui-jqgrid tr.jqgrow td` depend on which kind of wrapping (word wrapping, char-wrapping ...) you need. Just the rule from [the answer](http://stackoverflow.com/a/6915486/315935) or [this one](http://stackoverflow.com/a/3006134/315935). – Oleg Jul 18 '14 at 08:56
  • @Oleg According to your comments I've edited my question. – kamaci Jul 18 '14 at 11:20
  • `tableToGrid` is not part of jqGrid. **I recommend you never use it and create jqGrid directly.** `tableToGrid` was developed by Peter Romianowski (see [the code](https://github.com/tonytomov/jqGrid/blob/v4.6.0/js/grid.tbltogrid.js)) and it was included in some very old version of jqGrid. In my opinion it should be either removed or full rewritten to be correspond to the current version of jqGrid. – Oleg Jul 18 '14 at 11:52
  • I found the reason. jqgrid has white-space: pre for each td and even I override it ie does not work properly. – kamaci Aug 08 '14 at 06:13
  • jqGrid uses the same CSS rule. So You Need just verify that you includes your Rühles **after** ui.jqgrid.css – Oleg Aug 08 '14 at 07:53
  • Even I do it after that it does not work. Is there any method to refresh the jqGrid table? – kamaci Aug 08 '14 at 08:15
  • @Oleg I've edited my question with screenshots of CSS properties. – kamaci Aug 08 '14 at 08:31
  • I am now in vocation, so I can't help you. In any way it would be important to have a Demo which reproduce the Problem. One can See which other libraries in which versions you use. Moreover it could be important to know which version of IE You use in your Tests. – Oleg Aug 08 '14 at 15:37
  • @Oleg I have some details at this question: http://stackoverflow.com/questions/25199414/ie9-does-not-understand-overriden-css-property#comment39246114_25199414 – kamaci Aug 11 '14 at 06:26

0 Answers0