0

I am having a Gridview inside a div tag
and there is a div below this div tasg containg other contents.
If I don't set the Gridview div height then the contents of GV overflows into parts present below the GV.
Else if I set, when the records are less, there would be a empty block after the GV.
How do I solve this.
Please have look at the code ...

<div style="height: 100%; width: 785px; margin-top: 0px; overflow: hidden; display: table;">
    <tr>
        <td>
            <asp:GridView ID="dgAccessGrp" runat="server" Style="z-index: 101; left: 13px; position: absolute;
                margin-top: 0px; width: 686px;" AutoGenerateColumns="False" DataKeyNames="access_group_id"
                AllowPaging="True" RowStyle-Height="20px" CellPadding="3" CellSpacing="1" OnRowCancelingEdit="accessGrp_RowCancelingEdit"
                OnRowDeleting="accessGrp_RowDeleting" OnRowEditing="accessGrp_RowEditing" OnRowUpdating="accessGrp_RowUpdating"
                OnPageIndexChanging="dgAccessGrp_PageIndexChanging" OnRowCommand="dgAccessGrp_RowCommand"
                OnRowDataBound="dgAccessGrp_RowDataBound" Font-Bold="False">
                <Columns>
                    <asp:TemplateField HeaderText="SI No">
                        <ItemTemplate>
                            <asp:Label ID="lblAccessGrpID" runat="server" Width="70px" Text="<%# Bind('access_group_id') %>"
                                Visible="false"></asp:Label>
                            <asp:Label ID="lblSIno" runat="server" Width="15px" Text="<%#Container.DataItemIndex+1 %>"></asp:Label>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:BoundField DataField="access_group_id" Visible="False" />
                    <asp:TemplateField HeaderText="Access group">
                        <ItemTemplate>
                            <asp:LinkButton ID="btnSelect" CommandArgument='<%# Bind("access_group_id") %>' CommandName='SelectAccessGroup'
                                Text='<%# Bind("access_group_name") %>' runat="server" Width="90px"></asp:LinkButton>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtAccessGrp" MaxLength="50" runat="server" Width="90px" Text='<%# Bind("access_group_name") %>'> </asp:TextBox>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Business Unit">
                        <ItemTemplate>
                            <asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_name') %>"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_id') %>" Visible="false"></asp:Label>
                            <asp:Label ID="lblIsActiveBU" runat="server" Width="70px" Text="<%# Bind('bu_active') %>"
                                Visible="false"></asp:Label>
                            <asp:DropDownList ID="dgDrpBU" runat="server" DataValueField="bu_id" DataTextField="bu_name">
                            </asp:DropDownList>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="BU Line">
                        <ItemTemplate>
                            <asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_name') %>"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_id') %>"
                                Visible="false"></asp:Label>
                            <asp:Label ID="lblIsActiveBULine" runat="server" Width="70px" Text="<%# Bind('business_line_active') %>"
                                Visible="false"></asp:Label>
                            <asp:DropDownList ID="dgDrpBULine" runat="server" DataValueField="business_line_id"
                                DataTextField="business_line_name">
                            </asp:DropDownList>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Location">
                        <ItemTemplate>
                            <asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location') %>"></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location_id') %>"
                                Visible="false"></asp:Label>
                            <asp:Label ID="lblIsActiveStatus" runat="server" Width="70px" Text="<%# Bind('status') %>"
                                Visible="false"></asp:Label>
                            <asp:DropDownList ID="dgDrpBULocation" runat="server" DataValueField="location_id"
                                DataTextField="location">
                            </asp:DropDownList>
                        </EditItemTemplate>
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                    <asp:CommandField ButtonType="Image" CancelImageUrl="~/IMAGEs/cross.gif" EditImageUrl="~/IMAGEs/edit.gif"
                        EditText="" HeaderText="" ShowEditButton="True" UpdateImageUrl="~/IMAGEs/check.gif"
                        UpdateText="">
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                        <HeaderStyle BackColor="#006699" Font-Names="Arial" Font-Size="8pt" ForeColor="White" />
                        <ItemStyle Width="30px" />
                    </asp:CommandField>
                    <asp:TemplateField HeaderText="">
                        <ItemTemplate>
                            <asp:LinkButton ID="btnDelete" CommandArgument='<%# Bind("access_group_id") %>' OnClientClick="return confirm('Are you sure you want to delete this record?');"
                                runat="server" Width="60px" CommandName="Delete">Delete</asp:LinkButton>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" Width="50px" />
                        <HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
                            Font-Size="8pt" ForeColor="White" />
                        <ControlStyle Font-Names="Arial" Font-Size="8pt" />
                    </asp:TemplateField>
                </Columns>
                <EditRowStyle BackColor="Yellow" />
                <PagerSettings Position="TopAndBottom" />
                <PagerStyle Wrap="True" BackColor="#CCCCCC" HorizontalAlign="Center" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
                SelectCommand="SELECT access_group_name, is_active, access_group_id, last_modified_by, date_stamp, bu_id, business_line_id, location_id FROM tbl_car_access_groups ORDER BY access_group_id DESC">
            </asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
                SelectCommand="Select bu_id,bu_name from  tbl_car_bu ORDER BY bu_name ASC"></asp:SqlDataSource>
        </td>
    </tr>
</div>
<div id="detailArea">
    <br />
    <asp:Label ID="lblError" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="9pt"
        ForeColor="White" Visible="False" BackColor="#E2001A"></asp:Label>
    <table style="height: 347px; width: 915px;">
        <tr>
            <td valign="top" bgcolor="#E1FFE1" style="border: 2px solid #808285">
                <table>
                    <tr>
                        <td class="style26" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            Select User(s) Below :
                        </td>
                    </tr>
                    <tr>
                        <td class="style17" valign="top">
                            <asp:ListBox ID="lbAllUsers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="style27">
                            <asp:Button ID="btnAddToMemberList" runat="server" Text="Add Selected User(s) To 'Group Members' List"
                                BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
                                Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
                                OnClick="btnAddToMemberList_Click" OnClientClick="return AddUserToList()" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style27">
                            <asp:Button ID="btnAddToGAList" runat="server" Text="Add Selected User(s) To 'Group Administrators' List"
                                BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
                                Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
                                OnClick="btnAddToGAList_Click" OnClientClick="return AddUserToList()" />
                        </td>
                    </tr>
                    <tr>
                        <td class="style27">
                            <asp:Button ID="btnAddToGDList" runat="server" Text="Add Selected User(s) To 'Delgated Responsibility' List"
                                BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
                                Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
                                OnClick="btnAddToGDList_Click" OnClientClick="return AddUserToList()" />
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top" bgcolor="#FFEFB0" style="border: 2px solid #808285" class="style31">
                <table>
                    <tr>
                        <td class="style28" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            Group Members :
                        </td>
                    </tr>
                    <tr>
                        <td class="style29" valign="top">
                            <asp:ListBox ID="lbMembers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                    </tr>
                    <tr>
                        <td class="style30">
                            <asp:Button ID="btnDelMember" runat="server" Text="Remove Selected Member(s)" BackColor="#215F8B"
                                BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
                                Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelMember_Click"
                                OnClientClick="return DelMembers()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table style="border: 2px solid #808285; width: 913px; background-color: #FFEFB0;">
        <tr>
            <td>
                <table>
                    <tr>
                        <td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            Group Administrators :
                        </td>
                        <td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
                            valign="bottom">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Delegated Responsibility To :
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:ListBox ID="lbGAs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                        <td>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:ListBox ID="lbGDs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
                                Width="432px" SelectionMode="Multiple"></asp:ListBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="btnDelGA" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
                                BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
                                Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGA_Click"
                                OnClientClick="return DelGAs()" />
                        </td>
                        <td>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="btnDelGD" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
                                BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
                                Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGD_Click"
                                OnClientClick="return DelGDs()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold">
                            &nbsp;Name/Email Pairs - Can be pasted into Outlook : (Press Ctrl+A within box to
                            select all) &nbsp;<asp:TextBox ID="tbUserNames" runat="server" Height="140px" TextMode="MultiLine"
                                Width="881px" ReadOnly="True"></asp:TextBox>
                            <br />
                            <br />
                            <br />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <br />
</div>
1
  • kindly put only those html which is relevant to the question. Apr 3, 2013 at 11:56

2 Answers 2

0

Set the minimum height of the div containing your gridview.
Also set the overflow property to auto of the gridview div

You can refer these links
Mysterious min-height behavior
CSS Max Height Property

0

Problem in Style you have added to gridview Please remove "position: absolute" attribute from your style.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.