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?

Hello @noorshahida88!

Please use the following code in JavaScript Editor to set the List or Library control column width.
Where SPDataTable0 is the internal name of the List or Library control and i in columns[i] is the column position.

  fd.spRendered(function() {
  var columns = $(fd.control('SPDataTable0').$el).find('col');
  console.log(columns);
  $(columns[i]).attr("style","width:500px");
  });

Hello @mnikitina,

Doesn't change anything. Moreover, I didn't understand of console.log which I don't see anything after I press F12.

@noorshahida88,

Please try the code below, it should change the "Documents" column weight, as its position is 2. Just replace SPDataTable0 with the internal name of the List or Library control.

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

Thanks @mnikitina

1 Like

Hi mnikitina.

The code you provided works for an inline list/library control when there are a few columns/fields. However, on an inline list/library control with more columns/fields (23 fields in my case) the code to expand the columns for some reason doesn't work and I'm not sure why. Can you try to duplicate on on your end and let us know the resolution?

Thanks,
stormanh

@stormanh,

Could you please share the screenshot of the 'List or Library' control and the script you are using.

Do you have any messages in the console?

What is the column type: string, drop-down, date, etc? What is the column position?

Hi, is this code still works for columns more than 10 since i tried for column 14th but nothing change.

@noorshahida88,

Do you have any messages in the console?

What is the column type: string, drop-down, date, etc? What is the column position?

Hi @mnikitina

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.
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.

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.

@irfanz,

Regarding the console.log code, make sure that there is no filter of the messages in the console:
image

@mnikitina is it possible to change the height as well or at least have this expandable? So that the user can press the return key to go down a line?

Thanks

Hello @chris.cundy,

What SharePoint version are you using?

Do you mean changing the column height for Multiple lines of text column type?

If you could attach a screenshot it would be very helpful.

Hi @mnikitina

So the field highlighted in Red on the "DataTable" control. Is it possible for this to expand as lots of text needs to be inputted into this box and clearly visible to read rather than scrolling left and right.

Ideally we'd like this to automatically expand horizontally, vertically and possibly diagonally?

Also is there a way to get the form to load full screen rather than in the form drawer? Thanks

Hello @chris.cundy,

You can use Plain text field type instead of a Single line text field, thus the input size can be changed, and the whole text will be visible.

Edit mode:
image

View mode:
image

1 Like

@mnikitina - how do I add plain text field to this? I only seem to have "String" as an available type:

Hello @chris.cundy,

I'm sorry, I have not noticed you are using DataTable, not List or Library control.

You can use List or Library control instead and create a plain text field, thus a user can resize the column width and height.

Or we can add resize option for String column type in DataTable control, but that will be a paid support. If you are interested, please email us at support@plumsail.com for more information.

We need to use the DataTable control so that separate records can be added line by line for a single list item.