Hello Chua,

I am Glad to know that above suggested approach worked for you. Thanks for sharing additional JavaScript function. 

Let me know if you have any further questions with this matter.

Thanks,

Bhadresh

Hi,  thx for help. Ur suggested method is work, but exist some tiny problem (solved with Customize Method).

share with u all.

<ig:WebDropDown ID="WebDropDown1" runat="server" Width="100%"

                                    EnableAnimations="false"  

                                    DisplayMode="DropDownList">

                                    <ClientEvents DropDownOpening="FitWidth" />

                                </ig:WebDropDown>

<script language="javascript" type="text/javascript">

    function FitWidth(sender, args) {

        //sender._elements.DropDownContents.style.width = sender._element.clientWidth; //Work in IE only

        //sender._elements.DropDownContents.style.pixelWidth = sender._element.clientWidth; //Work in Chrome only

        //sender._elements.DropDownContents.style.posWidth = sender._element.clientWidth; //Work in Chrome

        sender._elements.DropDownContents.style.cssText = "WIDTH: " + sender._element.clientWidth + "px; HEIGHT: " + sender._elements.DropDownContents.style.height + "px; OVERFLOW: auto";

//Customize Method, work in IE, Chrome, Firefox as well

    }

</script>

Hello Chua,

To make the container width exactly equal as the webdropdown width when DropDown width is set to 100% make sure DropDownContainerWidth is not set using designer since DropDownContainerWidth is set in pixel. One possible approach is to set DropDownContainerWidth to 0 in order for DropDownContainer to use the same width of DropDown. The below line of code achieves the same:

this.WebDropDown1.DropDownContainerWidth = Unit.Pixel(0);

Hope this helps.

Thanks,

Bhadresh

Hi again,

Another idea: Maybe put the dropdown into a different container.  Maybe your CSS idea will work if the dropdown is in a better container.

Ed