Click here to Skip to main content
15,904,655 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a div and a gridview in my page as shown below:
<div id="gdDiv" style="overflow:scroll; height:500px; width:1270px; background-color:Black;" onload="MakeEqualDimension()">
            <asp:GridView 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">
            </asp:GridView>
        </div>

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.

What I have tried:

Hence I have tried the following javascript in the client side.

<script 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";
        }
    }
</script>

But its not working. Please help me. Thanks.
Posted
Comments
ZurdoDev 23-Jun-17 12:24pm    
Have you tried setting you div's height to 100%?
Richard Deeming 23-Jun-17 13:22pm    
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.
L B Choudhury 23-Jun-17 14:48pm    
The height & width styles are given to set max values for the div. And in cases when the gridview height or width becomes more than the div's max values then overflow:scroll should into picture.
Richard Deeming 26-Jun-17 6:34am    
So what's the problem then? Either you want the div to expand to fit the grid, or you don't.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900