ShieldUI Grid Resizing

Question

I'm currently evaluating the demo version of ShieldUI and have been playing with the grid control. I've bound to a local datasource and am trying to get column resizing working properly, but when I attempt to resize individual columns, there is a large jump as the column I am resizing is resized much larger and all the other columns are sized smaller. I'm guessing I have a CSS issue as the example on the ShieldUI site only changes the size between two adjacent columns, but can't figure out what I need to change in my style rules to get the same behavior as the example. Here's the code I'm using, with no additional styles defined other than linking to the full minimized ShieldUI CSS:

$("#grid1").shieldGrid({
    dataSource: {
        data: HRDataset
    },
    paging: {
        pageSize: 10
    },
    sorting: {
        multiple: false,
        allowUnsort: false
    },
    columns: [
        { field: "Employee_Name", title: "Employee Name", width: 30 },
        { field: "EmpID", title: "ID", width: 10 },
        { field: "Salary", title: "Salary", width: 20 },
        { field: "Position", title: "Position", width: 30 },
        { field: "State", title: "State", width: 10 },
        { field: "Zip", title: "Zip", width: 15 },
        { field: "Sex", title: "Sex", width: 10 },
        { field: "MaritalDesc", title: "Married", width: 10 }
    ],
    scrolling: true,
    resizing: true
});

Answer 1

The following term must be added scrollable: true