How to resize a chosen jquery dropdownlist on windows resize

问题

I have the following asp.net code which makes use of the jQuery chosen to customize the dropdownlist:

<asp:DropDownList ClientIDMode="Static" ID="ddlProvider" CssClass="setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddlSpecialty" CssClass="chosen-select setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>

I use the following script to initialize the dropdownlist:

<script type="text/javascript">
    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]);
    }
</script>

CSS:

.setProvDDStyle
{
    width: 100%;
}

Here is the output:

I intentionally left the provider dropdownlist without the chosen-select style which creates the style. When I resize the browser window, you can see the width of the dropdownlist with the chosen select style does not resize based on the container. I added the above script inside the windows.resize() function but didn't really do anything.

How would I accomplish the styled dropdownlist to resize based on the size of the container

回答1:

I wrapped your Drop Down List inside a container DIV:

<div id="ddlSpecialtyContainer">
  <asp:DropDownList ClientIDMode="Static" ID="ddlSpecialty" CssClass="chosen-select setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
</div>

Then I added a window resize event handler which resizes the dynamically generated jQuery chosen control inside the Drop Down List container.

$(window).resize(function () {
  var width = $("#ddlSpecialtyContainer")[0].offsetWidth + "px";
  $("#ddlSpecialtyContainer .chosen-container").css("width", width);
});

This seems to work as you have requested.

来源：https://stackoverflow.com/questions/26425643/how-to-resize-a-chosen-jquery-dropdownlist-on-windows-resize

标签

jquery

html

css

ASP.NET

jquery-chosen