how to Resize child list box height in asp.net User control

leannekera

New Member
Given the following User control markup: \[code\]<div id="container" runat="server" style="height: 100%; width: 100%;"> <div> <asp:Label ID="lblSearch" runat="server" Text="Search:"></asp:Label> <br /> <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> <input id="btnSearch" type="button" value="http://stackoverflow.com/questions/15895378/Search" onclick="SearchClick(this)" /> </div> <div id="itemContents" runat="server" style="height: 85%; width: 100%;;"> <asp:Label ID="lblItems" runat="server" Text="Available Users:"></asp:Label> <br /> <asp:ListBox ID="lbxResults" runat="server" SelectionMode="Single" Width="100%" Height="95%"> </asp:ListBox> </div></div>\[/code\]I would like the user control height to be equal to placeholder height with list box to grow and fill up any height difference as all other controls are of known size.Some useful info:
  • Height can have the following values: 300, 400, 600 px, thus the needfor the listbox height to compensate for any height difference.
  • List box can contain 0 to 2000 elements.
  • Placeholder can be a div or an asp.net tab container.
My preference would be a css/jquery solution but code behind will do as well (I was thinking of using a height property to set up the child controls)Notes:[*]The sample markup uses style for brevity's sake.[*]The sample markup has hard coded some values for demo purposes(thusthe demo is working for height 300 px but not for the other values),feel free to change style/html as needed.[*]Environment: VS2010/.NET 4.0/jQuery latest.[*]Browsers: FF, IE7/8/9
 
Back
Top