title: How to resize a chosen jquery dropdownlist on windows resize
body: <p>I have the following asp.net code which makes use of the jQuery chosen to customize the <code>dropdownlist</code>:</p>
  
  <pre><code>&lt;asp:DropDownList ClientIDMode="Static" ID="ddlProvider" CssClass="setProvDDStyle" runat="server" AppendDataBoundItems="true"&gt;&lt;/asp:DropDownList&gt;
  &lt;asp:DropDownList ClientIDMode="Static" ID="ddlSpecialty" CssClass="chosen-select setProvDDStyle" runat="server" AppendDataBoundItems="true"&gt;&lt;/asp:DropDownList&gt;
  </code></pre>
  
  <p>I use the following script to initialize the <code>dropdownlist</code>:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var config = {
          '.chosen-select': {},
          '.chosen-select-deselect': { allow_single_deselect: true },
          '.chosen-select-no-single': { disable_search_threshold: 10 },
          '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
          '.chosen-select-width': { width: "95%" }
      }
      for (var selector in config) {
          $(selector).chosen(config[selector]);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.setProvDDStyle
  {
      width: 100%;
  }
  </code></pre>
  
  <p>Here is the output:</p>
  
  <p><img src="https://i.stack.imgur.com/Ejk20.png" alt="enter image description here"></p>
  
  <p>I intentionally left the provider dropdownlist without the <code>chosen-select</code> style which creates the style. When I resize the browser window, you can see the width of the <code>dropdownlist</code> with the <code>chosen select</code> style does not resize based on the container. I added the above script inside the <code>windows.resize()</code> function but didn't really do anything.</p>
  
  <p>How would I accomplish the styled dropdownlist to resize based on the size of the container</p>