SearchForKnowledge SearchForKnowledge - 6 months ago 45
jQuery Question

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:

enter image description here

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

Answer

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.