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:
<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
sharepoint online adjust column width

After:
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
SharePoint Online: Resize Column Width in List Forms using CSS SharePoint Online: Resize Column Width in List Forms using CSS Reviewed by Salaudeen Rajack on January 19, 2019 Rating: 5

No comments:

Please Login and comment to get your questions answered!

Powered by Blogger.