title: Controlling dropdown list box width
body: <p>I am trying to find a way to control the width of the items displayed in a <strong>databound</strong> drop down list box. I am currently trying to use jQuery to control the width of the options displayed, but am having problems coming up with the correct syntax. Any help would be appreciated or a better idea of some method to handle the problem. The DropDown is an ASP control so getting to the option part is the issue as shown below.</p>
  
  <pre><code>&lt;script src="../../scripts/jquery-1.7.js" type="text/javascript"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
  
    $(document).ready(function() {
      $('#&lt;%=DropDownList1.ClientID %&gt;').css({ 'width': '10' });
      $('#&lt;%=DropDownList1.ClientID %&gt;'option).css({ 'width': '70' });
  
      alert("Testing."); 
    }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>UPDATE: I was asked to provide some html from the code behind, there are over 3000 records available in the DDL, so here are the first few....</p>
  
  <pre><code> &lt;select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder2$DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder2$DropDownList1\',\'\')', 0)" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder2_DropDownList1"&gt;
  &lt;option selected="selected" value="434"&gt; &lt;/option&gt;
  &lt;option value="1160"&gt;-&lt;/option&gt;
  &lt;option value="638"&gt; 
  &lt;/option&gt;
  &lt;option value="702"&gt;    [%iScreen%]   = getnum(&amp;quot;iScreen&amp;quot;)
  [%iButton%]   = getnum(&amp;quot;iButton&amp;quot;)
  [%iProg%]     = getnum(&amp;quot;iProg&amp;quot;)
  [%itest1%]    = getnum(&amp;quot;itest1&amp;quot;)
  [%iSelectMY%] = getnum(&amp;quot;iSelectMY&amp;quot;)
  [%iDSAPNO%]   = getnum(&amp;quot;iDSAPNO&amp;quot;)
  [%iVehicle%]  = getnum(&amp;quot;iVehicle&amp;quot;)
  [%iIESC%]     = getnum(&amp;quot;iIESC&amp;quot;)
  [%iEngine%]   = getnum(&amp;quot;iEngine&amp;quot;)
  [%iDSA%]      = getnum(&amp;quot;iDSA&amp;quot;)
  [%iEXY%]      = getnum(&amp;quot;iEXY&amp;quot;)
  [%iACCPNO%]   = getnum(&amp;quot;iACCPNO&amp;quot;)
  [%sPart%]     = &lt;/option&gt;
  &lt;option value="113"&gt;
  &lt;/option&gt;
  &lt;option value="342"&gt;
  &lt;/option&gt;
  &lt;option value="628"&gt;
      Isolation Solenoid
  
      Please Depress and Release Brake
  
      When You Press 'On' The Modulator is Drive For 15 Seconds.
  
      Check That No Braking Force Is Exerted.
  &lt;/option&gt;
  &lt;option value="2898"&gt;%&lt;/option&gt;
  &lt;option value="3095"&gt;&amp;amp;8BK&lt;/option&gt;
  &lt;option value="3091"&gt;&amp;amp;WZA&lt;/option&gt;here
  </code></pre>
  
  <p>To long to list all, I realize there are block text in the options as well. This is the nature of the db backend which I have no control over.</p>
  
  <p>Thank you,</p>