On SharePoint list form, we have different column's with different width. We want to increase column width. Our aim was all columns need to have same width on form. Please refer attached image. Kindly suggest, how to achieve it.
3 Answers
We can add the CSS style below into a script editor web part in new/edit list form page to achieve it.
<style type="text/css">
input[id$='NumberField']{
width:386px !important;
}
input[id$='CurrencyField']{
width:386px !important;
}
input[id$='DateTimeFieldDate']{
width:360px !important;
}
select[id$='DropDownChoice']{
width:398px !important;
}
select[id$='LookupField']{
width:398px !important;
}
div[id$='containercontrolHolder']{
width:398px !important;
}
div[id$='TextField_topDiv']{
width:392px !important;
}
</style>
Add a content editor webpart in your page and add the below script,
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(processForm, "sp.js");
function processForm(){
$("select[title='Division Name']").css('width', '500px');
}
});
</script >
Try to follow the below steps :
- Start Sharepoint Designer and open up the corresponding view (AllItems.asxp, here) Note : here it is AllItems.asxp, you can select any form like new, edit aspx
- Make sure the view shows up in design mode :
- Right Click anywhere in the view and select the menu option “Convert to XSLT Data View”:
The DataFormWebPart will display the view;
- You can now visually modify the list width :
Save the page; refresh your page in the browser.
Reference URL :