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>Similarly, to wrap field lables, use:
<style type="text/css"> .ms-formlabel { width: 800px; } .ms-formlabel nobr { white-space: normal; } </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
No comments:
Please Login and comment to get your questions answered!