Inline edit has problems if the column width is set

Grocery CRUD Enterprise
1

Enterprise 3.2.7

If the user sets the width of a column with the Columns menu.
And the width is less than the width required for inline editing, the buttons spread across the next columns and can’t be clicked. So the inline edit can not be canceled.

The ugly workaround is to tell the user not to set the column width.
Is there a more elegant workaround?
Maybe make inline editing ignore the column width?

Ray
image

2

Hello @mopac and thanks for the detailed bug report. I will try to fix this issue for the next version. Till then you can maybe use a small JavaScript work-around for that:

window.addEventListener('gcrud.datagrid-quick-edit.inline-edit', ({detail}) => {
    setTimeout(() => {
        const fieldName = detail.fieldName;
        const element = document.getElementById(`gc-form-inline-edit-${fieldName}`);

        if (element && element.parentElement) {
            element.parentElement.style.minWidth = '250px';
        }
    }, 300);
});
window.addEventListener('gcrud.datagrid-quick-edit.cancel-inline-edit', ({detail}) => {
    setTimeout(() => {
        const elements = document.querySelectorAll('[class*="gc-column-text-"]');
        elements.forEach(element => {
            element.style.minWidth = '';
        });
    }, 300);
});

window.addEventListener('gcrud.form.update-inline-edit', ({detail}) => {
    setTimeout(() => {
        const elements = document.querySelectorAll('[class*="gc-column-text-"]');
        elements.forEach(element => {
            element.style.minWidth = '';
        });
    }, 300);
});

You can add this in a JavaScript file that you call and you can remove it once this is fixed in a later version (I will inform you once this is ready). Just make sure that you have:

'publish_events' => true,

At your configuration file (default is false)

Regards
Johnny