I have a list and library control that is around 21 columns big, so it requires horizontal scrolling. Since i cannot remove any column i was thinking if there is any way to style it so that the font, width of the column to be adjusted to the forms width.
Hello @Rinu,
You can change the font size of the List or Library content to make it fit the column width using this CSS:
/* change control headers font size */
.k-grid-header .k-header {
font-size: small !important;
}
/* change control content font size */
.k-grid {
font-size: small !important;
}Thanks Mnikitina,
Is there any way we can auto adjust the the list and library control to 1080 without having the horizontal scroll bar?
Hello @Rinu,
There is no way to auto-adjust List or Library to fit the screen so there is no scroll bar, but you can change the font width and the width of the columns with this code to make it fit the desired screen width:
fd.spRendered(function() {
fd.control('SPDataTable0').ready().then(function(dt) {
var columns = $(fd.control('SPDataTable0').$el).find('col');
// 3 is the index of the column
$(columns[3]).attr("style","width:500px");
});
});
Hello. the code above works. My only concern is that it does not decrease the size of the column when the column heading is soo long. i.e. below
Is there a way to do it?
Hello @Jamail_Serio,
In SharePoint Online, you can now just drag the header's border in the browser and expand the column this way:
But if you want to do it with JavaScript, please, try the following:
fd.spRendered(function () {
// set the List/Library control column width
fd.control('SPDataTable1').ready().then(function(dt) {
var widget = dt.widget;
var column1 = widget.columns[1];
widget.resizeColumn(column1, 500);
});
});The script doesn't work. I tried copying the existing scripts from another form also cannot.
FYI, the type of the column is multiple lines.
I tried by adjusting the column height during fill in the details but after save it, the display is not same as what has been key in earlier.
Hello @noorshahida88,
You can use the code below to define the column width in view and edit mode. You can define the width for all columns or just for specific one.
fd.spRendered(function() {
var dataTable = fd.control('SPDataTable1');
dataTable.ready().then(function() {
var columns = dataTable.widget.columns;
for (let i = 2; i < columns.length; i++) {
var field = columns[i].field;
var width = 220;
dataTable._columnWidthViewStorage.set(field, width);
dataTable._columnWidthEditStorage.set(field, width);
}
dataTable._columnWidthViewStorage.set('*', true);
dataTable._columnWidthEditStorage.set('*', true);
});
});Hi @mnikitina ,
I copied your code and paste it into JS for both Edit and Display mode but nothing change.
Hello @noorshahida88,
Have you updated the control's name in the code?
Do you see errors in the browser console(F12)?
What SharePoint version are you using? What is the version of the desktop designer?
If you are using SharePoint Online and the latest version of the designer, comment out all code on the form except the one that changes the column's width and test.
Hi @mnikitina
I'm using SharePoint Online with the latest desktop version for the designer.
no changes even after I comment out all other code.
No error also from console.
Make sure that there is no custom CSS on the form related to the List or Library control. Then clear the browser cache or open the form in the incognito window, and check if the width of the columns has changed.
Hello @noorshahida88,
Starting from version v1.9.3 for SharePoint Online, you can define the width of the column in the designer UI. Please find more information here.
My designer is version v1.9.4 but nothing changed when I set the width or without setting it.
Example when I set width = 300,
When I added a new item with longer characters, the column width auto change.
How to make sure the width stay in one page without those horizontal scrolling?
On my tenant, the column width is set according to the width value and does not change when the column content increases, only the row height changes.
Please remove all custom CSS and JS script related to columns width, then clear browser cache and try again.
It's not very simple. The page width depends on the screen resolution and is different for each device. You can try to calculate the width for each column based on the screen width and update the column width dynamically using the code from the previous post. But, as I said, it's not that easy.