Search code examples
javascriptjqueryjsgrid

Auto sized column in jsGrid

I am playing with jsGrid, and have only one problem left to solve: When i define the grid columns, i specify width for all columns but one.

fields: [
    { name: "Name", type: "text", title: "Naziv"  },
    { name: "Mbs", type: "text", width: 24, title: "MBS"  },
    { name: "PB", type: "text", width: 23, title: "PB"  },
    { name: "OIB", type: "text", width: 34, title: "OIB"  },
    { name: "Country", type: "text", width: 35, title: "Država"  },
    { name: "City", type: "text", width: 35, title: "Grad"  },
    { name: "ActiveFrom", type: "text", width: 28, title: "Od"  },
    { name: "ActiveTo", type: "text", width: 28, title: "Do"  },
    { name: "Active", type: "checkbox", width:10, title: "A" }
],

The problem is that the first field is set to 100px, and then, browser calculates width of all columns based on specified width, which results in column width changing when browser window width changes.

I have tried setting that column width to "auto" and "*", but then, that column takes 90% of the table, and width of other columns is 10px (but css shows the width i defined earlier)

Does anyone know of a solution to this problem?

Solution

  • At least one column width must be set to "auto", before trying to render the table. If no width is set, it defaults to 100px, thus breaking the desired appearance.

    Just my luck. I waste a hour on something so trivial, and when i decide to ask here, i find the solution and wish to delete the shame of this question.