Sharepoint Form - Change Dynamic DataTable Field Width

[irfanz]

Hi Team

I am trying to change width of a Multi-line Text column in DataTable (data source is Sharepoint list), however i am unable to achieve this even after following the instruction mentioned in the Article.

How to enlarge columns for List or Library Control

I'm having issue whereby the columns for List or Library control is not standardise and cannot be alter. How to do it? How to make the columns width bigger/smaller since my users prefer to fill up those items inline rather than dialog? [image]

I have DataTable contained in a Tab Control in a Sharepoint Form.

Also noticed that console.log is not logging anything in browser console (triggered in fd.spRendered event). I am using Chrome browser.

[noorshahida88]

Hi @irfanz,

Try this script. Change the data table internal name, columns position and width only. It should works

fd.spRendered(function() {
fd.control('SPDataTable1').ready().then(function(dt) {
var columns = $(fd.control('SPDataTable1').$el).find('col');
$(columns[2]).attr("style","width:350px");
$(columns[6]).attr("style","width:200px");
});
});

[irfanz]

Hi @noorshahida88

Thank you for the reply.
I have tried this script after updating as per my data table configuration, however no change.

Also i am not seeing any output in browser console for console.log (within spRendered event). Dont know what is the issue.

[noorshahida88]

@irfanz, remove or comment console line first and make sure internal name for your data table is correct.

[irfanz]

Hi @noorshahida88

I have removed console line and checked for internal name which is correct, but their is no change to Column width

[noorshahida88]

@irfanz, how many columns do you display for that data table? maybe that causing the issue because I had tried before for more than 10 columns; the script cannot works. Try with a few columns first and see if it is works for your environment.

[irfanz]

@noorshahida88, I have tried with total columns in data table to be 8
However the issue presist, and no change to width of the required column

Any other Ideas?

[noorshahida88]

@irfanz, there is limitation when we view the data table as it will fix to 1 page. So, I think can try to reduce the width size; 500px is too long for 8 columns table.

change your editing to Inline instead of dialog

[mnikitina]

Hello @noorshahida88, @irfanz,

Yes, it is a bit tricky to change the width of the columns in List or Library control.

Please find my reply in this thread:

How to enlarge columns for List or Library Control

Hello @irfanz, Welcome to Plumsail Community! You can change the width of the multiline text column in List or Library control using the CSS. First, add a CSS class to List or Library control, e.g. my-table. [image] And add this code to CSS editor: .my-table .fd-sp-datatable tbody tr td:nth-child(3) { min-width: 1200px; } Where 3 is a number of a column. The count of columns, in this case, starts from 1.

@noorshahida88,

Thank you for sharing your knowledge! You are already a guru in the styling of List or Library control.

[irfanz]

Thank you @mnikitina, this worked