SharePoint Online: Resize Column Width in List Forms using CSS
Requirement: Change the width of all columns in the list edit form!
How to modify column width in SharePoint Online?
If you want to set the width of a specific field in classic list forms, 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 the 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 labels, use:
<style type="text/css">
.ms-formlabel {
width: 800px;
}
.ms-formlabel nobr {
white-space: normal;
}
Copy-paste this CSS into either the 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