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:
Here is the CSS to set width of all columns:
Before
After:
If you want to modify column width in SharePoint Online list views, use: SharePoint Online: Set Column Width in List View
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:
<script> $(document).ready(function(){ $('input[title="IC Number"]').css('width','350px'); }); </script>
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; } </style>Copy-paste this CSS in either Script editor or content editor web parts.
Before
After:
If you want to modify column width in SharePoint Online list views, use: SharePoint Online: Set Column Width in List View
SharePoint Online: Resize Column Width in List Forms using CSS
Reviewed by Salaudeen Rajack
on
January 19, 2019
Rating:

No comments:
Please Login and comment to get your questions answered!