Changing a dropdown column width

Question

I am using SharePoint Designer 2013 and have no license for InfoPath, so it can not be used.

I have made a basic arrangement of newForm, editForm, and displayForm. I am aware this is probably not the best way to do this, but I want to only edit the code in each of those forms .aspx file or include a file to read from. I do not want to edit any base files, if possible, as they are being used in other places.

Initially, when I made this column, there was wrapping and the piece was a static width, but after making a newForm again, it is now no-wrapping, but very long, though I don't recall making any changes.

I have been trying to change the width of a drop-down menu column, (add a column, drop-down choice) but no matter what I've changed in the code it will not affect the form's drop-down size. (Which is about 900-1000px wide) It seems like something is overwriting any width orders, even if I give them an !important. I want it to no wrap with overflow hidden (anything too wide will just be cut off) I have edited the

<td width="400px">

as well as attempted to use the css as

.ms-formbody{}
.menu-item-text{}

as well as attempted to directly target the field by its name or id, which are

<SharePoint:FormField runat="server" id="f11{$Pos}" FieldName= "EC">

But I am not sure the syntax was correct. I have even tried a few of the javascript solutions on here, which again, I may be using incorrect syntax to target the field, but has also not worked. ( I do not know if I am speaking to the correct field name, for example, since nothing is changing)

Thank you!

Answer 1

By default, the choice field in Sharepoint list has an auto-size style based on its content.

---

To set a width style for all choice fields in your list form,

• Open the Edit / New form in a new tab.
• Edit the page.
• Add a script editor with the blow CSS style

CSS

<style>
select {
width:300px !important;
}
</style>

---

To set a width style for Specific choice fields in your list form,

• Open the Edit / New form in a new tab.
• Edit the page.
• Add a script editor with the blow Js Script with your own field ID

JS

document.querySelector("select[id='FieldID'").style= "Width:300px !important";

Check also this link to know how to edit the form and add script editor