SlickGrid editable width in a column is smaller than column width

Question

When we select a cell for editing, the maximum editable width is significantly less than the column width. This can leave long strings clipped and in the case of Slick.Editors.LongText, a popup that cannot be stretched horizontally to the full width of the column.

We are using 6Pac SlickGrid version 2.4.42 (released 28 September, 2021). We are using Chrome as the browser.

The behavior we want to see can be observed in the 6Pac example: http://6pac.github.io/SlickGrid/examples/example3-editing.html . ...we've examined the js code for the example but do not see the difference.

All column objects are created using a single function that accepts a string as the "field" and makes a few decisions based on the value of the field. The object is then returned to the calling code:

obj = {
    id: field, 
    asyncEditorLoading: true,
    autoEdit: true,
    columnPickerTitle: 'Show/Hide Columns',
    editable: true,
    editor: cellEditor,
    enableAddRow: true,
    enableCellNavigation: true,
    excludeFromColumnPicker: columnPickerExclude,
    field: field,
    forceFitColumns: false,
    name: field,
    resizeable: true,
    sortable: true,
    syncColumnCellResize: true,

    // column widths
    maxWidth: _colWidthMax,
    minWidth: _colWidthMin,
    width: colWidth,
};

column width values are calculated based on the field value: Min is 40 Width may be 140, 500 or 1000. Max is always 1000.

columnPickerExclude is only set to true for one column (also based on field value).

cellEditor is set to either Slick.Editors.Text or (in only one case) Slick.Editors.LongText.

We've been through the Grid options on "https://github.com/6pac/SlickGrid/wiki/Grid-Options" and reviewed the list of options in the file slick.grid.js.

Have tried altering several option values, have seen no change in the described behavior.

Answer 1

I'm a bit mystified by this. You are saying that the example works as you would like, but your code doesn't?
Sounds most likely a css issue.

The best thing to do would be to take your test case, separate it into a separate page and then simplify it back until it's the same as the example. Somewhere along the way, you'll change something and it will start working, and then you'll know where to look.

If not, then post the code and we'll help