Wide drop down field has problem with selection arrow cutting off the selected field option

Hi there, I have created a drop down field and then expanded the field to be quite wide. I've amended the field styling so that it's a bit higher and has rounded corners. Now the arrow you use to select the option from the drop down list is in the middle of the field rather than at the end, and it cuts off visibility of the selected option.

I also used the designer to remove the field headings of the form fields (they then appear inside the field box), but this did not work for the drop down box I created, so I had to revert to having field headings or that one field would look different. 

Can you help me resolve these two issues please?

Thanks!

Ben.

Thank you for contacting us.

You can fix this issue by Injecting Custom CSS.  Inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

[data-type="control_dropdown"] .form-input-wide {

    width: 453px;

}

After adding this code you form will look like this.

Here is my cloned form where I added mentioned CSS code: https://form.jotform.com/60132165397959  

Feel free to clone it. 

Hope this will help. Let us know if you need further assistance.