increase column width of new form(newform.aspx) on SharePoint list

Question

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.

Answer 1

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>

Answer 2

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 >

Answer 3

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

AllItems.asxp

• Make sure the view shows up in design mode :

Design mode

• Right Click anywhere in the view and select the menu option “Convert to XSLT Data View”:

Convert to XSLT

The DataFormWebPart will display the view;

DataFormWebPart

• You can now visually modify the list width :

Result - output

Save the page; refresh your page in the browser.

Reference URL :

Sharepoint : how to change the column width of a list