List view customization to view all text in long text field

Hi,

Is there a way to customize a list view so that a long text field is not truncated like in the image below.

Ideally I want the row size to grow dynamically all the text in the field can be read from the list view page.

I was looking into ‘formatters’ but can’t seem to get it to work.

1 Like

@fergal List view formatters should work like this…

Make sure that the function key inside formatters is the fieldname of the input field that the column is displaying…

frappe.listview_settings['DoctypeName'] = {
    formatters: {
        note: function(v, df, doc) {
            return v;
            // Or
            return '<span>' + v + '</span>';
            // Or
            return '<span style="display:block;width:400px;">' + v + '</span>';
        },
    }
};

@kid1194

Thanks for the reply. I’ve tried using formatters like this but the text in a long text field is truncated with an ellipsis.

I want to stop the truncation and have the row height adjust dynamicly so that all the text contained in the long text field is diplayed on the listview page.

Do you have any ideas on how to do this?

@fergal It looks like ellipsis is inherited from list view column…

Try the same but with inline style. This hopefully will remove the ellipsis…

frappe.listview_settings['DoctypeName'] = {
    formatters: {
        note: function(v, df, doc) {
            return '<span style="white-space:normal;overflow:auto;text-overflow:unset;">' + v + '</span>';
        },
    }
};

1 Like

@fergal Did the code above worked or not?

I hope it did…

@kid1194

The code does stop the text being truncated but unfortunately the row height does not adjust automatically so it ends up looking pretty bad with text on top of other text.

For now I think I found a solution using script reports as I don’t think it will be possible with list view.

Thanks for your help anyway :+1: