How to modify dimensions of a div during run time

I have a div and a gridview in my page as shown below:

 id="gdDiv" style="overflow:scroll; height:500px; width:1270px; background-color:Black;" onload="MakeEqualDimension()">  ID="gdView" runat="server" Width="1200px" Height="350px" RowStyle-HorizontalAlign="Center" RowStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Center" HeaderStyle-BackColor="Maroon" HeaderStyle-ForeColor="White" HeaderStyle-Height="5px" RowStyle-BackColor="Black" RowStyle-ForeColor="White" GridLines="Both" ShowFooter="true" RowStyle-Wrap="false" onrowcreated="gdView_RowCreated" onrowdatabound="gdView_RowDataBound" HeaderStyle-Font-Size="10px" RowStyle-Font-Size="10px" HeaderStyle-Font-Bold="true" FooterStyle-Font-Bold="true" FooterStyle-Font-Size="10px">

The gridview is populated dynamically and so its height and width varies depending upon the number of data. I want the div also to change its height and width based on the height & width of the gridview after it is populated. Hence I have tried the following javascript in the client side.

 type="text/javascript"> function MakeEqualDimension() { if ((document.getElementById('gdDiv').offsetHeight) > (document.getElementById('gdView').getAttribute("height"))) {             document.getElementById('gdDiv').style.height = (document.getElementById('gdView').getAttribute("height")) + "px"; } if ((document.getElementById('gdDiv').style.width) > (document.getElementById('gdView').getAttribute("width"))) {             document.getElementById('gdDiv').width = (document.getElementById('gdView').getAttribute("width")) + "px"; } }

But its not working. Please help me. Thanks.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajkiran Swain9y ago
Just remove the overflow, height and width styles. So long as you're not using float or absolute positioning on the grid, the div will automatically expand to be at least as big as its contents.
Mobeen Rashid9y ago
You don't actually need to write JavaScript, this job can be done with simple css.
As your code shows that your gridview(which will translate into a table) is inside of your div, so you need to set simple css properties on div element.
div{
display:table;
height:auto;
overflow:hidden;
}