0

I am using SPO. I have a custom New Item form with a 255 character single line of text field called [Description]

I would like to increase the width of the field input box in the custom New Item form. I belive it is currently at 400px and I would like 2000px

I have tried to adjust the width in SPD by editing the form but it had no impact.

Does anyone have any suggestions, perhaps javascript that works?

Improve this question

2 Answers 2

Reset to default
3

CSS-only. (Inside a script editor webpart on the form aspx page).

The only thing you need to change is the TR child element (tr:nth-child(1)). Now it targets the first column in the form. The first TD is always the label field and the second is the actual textbox. 

   <style type="text/css">
    tbody > tr:nth-child(1) > td:nth-child(2) > span > .ms-long {
    width:2000px;
    }
    </style>
Improve this answer
8
  • Hi, thanks for the code above. I pasted it into a Script Editor webpart added to the page but it hasnt had any impact. Is there something else I need to do?
    – cr1
    Mar 16, 2017 at 8:13
  • Did you add it to the actual list form? new.aspx? And do you have the new list experience?
    – Christoffer
    Mar 16, 2017 at 8:15
  • Hi Christoffer, i mustve done something wrong the first time. Repeated the process and now it works. Thank you.
    – cr1
    Mar 16, 2017 at 8:19
  • No problem. :) I was thinking that if the modern list experience were enabled, you would have needed different code.
    – Christoffer
    Mar 16, 2017 at 8:20
  • That is a very very specific path you are declaring with all those > (direct child elements). INPUTs having a class ms-long can be targeted with input.ms-long (note there is no space in between) A Form also has textareas, if you want to include those just do .ms-long
    – Danny '365CSI' Engelman
    Mar 16, 2017 at 10:17
0

Add a content editor webpart to the custom list form and add the below code inside it 

$("input[title='Description']").attr("style","width:2000px;");

If your Description field is Required field then just use below code

 $("input[title='Description Required Field']").attr("style","width:2000px;");

Dont forget to add Jquery reference above this code

Improve this answer
2
  • Hi, thanks for your answer. I used the following code but it hasn impacted the field width: <script src="ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script> $("input[title='Description']").attr("style","width:2000px;"); </script>
    – cr1
    Mar 16, 2017 at 8:06
  • Can you just do inspect element of your browser (press F12) and see what is the title of your text field?
    – SharePointMan
    Mar 16, 2017 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.