SharePoint Online: Resize Column Width in List Forms using CSS

Requirement: Change width of all columns in list edit form!

How to modify column width in SharePoint Online?
If you want to set width of a specific field in list form, find its title or ID using Developer tools and use this script in Script editor:
    $('input[title="IC Number"]').css('width','350px');

Here is the CSS to set width of all columns:
<style type="text/css">
.ms-formtable .ms-input, .ms-formtable Input
 width: 250px !important;
.ms-formtable Select
 width: 262px !important;
Similarly, to wrap field lables, use:
<style type="text/css">
.ms-formlabel {
    width: 800px;
.ms-formlabel nobr {
    white-space: normal;
Copy-paste this CSS in either Script editor or content editor web parts.

sharepoint online adjust column width

sharepoint online change width of column

If you want to modify column width in SharePoint Online list views, use: SharePoint Online: Set Column Width in List View

No comments:

Please Login and comment to get your questions answered!

Powered by Blogger.