Change the size of your drop down fields in Zendesk Help Center

Zendesk has a fixed width for dropdown fields of 300px and will wrap the text in the option if it excedes it. You can't use CSS to fix the size because the options are built in a hidden DOM node and only rendered after you click into the field.

So what you have todo is attach a listener on the DOMnodeinserted event for the div. You have to add CSS to make the root element.

.nesty-input {
max-width: 555px;  
} 

Then in the new request template page add the javascript to update the style on the .nesty-panel

$(document).ready(function(){
  $('div').one('DOMNodeInserted', function(e){
      $('.nesty-panel').one('DOMNodeInserted', function(e){
      $(this).attr("style","max-width: 555px; width: 500px; top: "+e.currentTarget.style["top"]+" left: "+e.currentTarget.style["left"]);
    });
  });

});

all the panel are built after document.ready so we wait until that is done and then listen for all new div's added.

you can get the code from github gist