When I Set Width="100%" , the containerWidth no equal as the width of webdropwodn.
<table width="600px" align="center" border="1">
<tr>
<td style="width:20%;">
<asp:Label ID="lbl1" runat="server" Text="Normal DDL"></asp:Label>
</td>
<td >
<asp:DropDownList ID="ddlNormal" runat="server" Width="100%"></asp:DropDownList>
</tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Infragistric DDL"></asp:Label>
<ig:WebDropDown ID="WebDropDown1" runat="server" Width="100%"
EnableAnimations="false" DropDownContainerWidth="100%"
DisplayMode="DropDownList">
</ig:WebDropDown>
</table>
I try modify the ig_dropDown.css as below but it bring unexpected container width to me too..
.igdd_DropDownListContainer
{
background-color:White;
border:solid 1px #BBBBBB;
float: left;
width:100%;
}
Any Idea to make the container width exactly equal as the webdropdown width when Width="100%"?
Hi,
I see in the designer that the DropDownContainerWidth does not accept percentage values at all. So that's why the 100% doesn't work. Maybe you can catch an event on the client side when the container is opening and set it then to the parent width.
Ed
Hi, thx for help. Ur suggested method is work, but exist some tiny problem (solved with Customize Method).
share with u all.
EnableAnimations="false"
<ClientEvents DropDownOpening="FitWidth" />
<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,
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