lining up gridview header problem

Question

User-1767698477 posted

I have a gridview on a page with a popup model editor on the page. This one has only 7 columns and I don't understand why it wont line up the header with the gridview. This is the middle gridview in the image below. I have the header and column sizes matching. I was adding 7 columns times the (cellpadding left 2px + cellpadding right 2px)=28 + left and right border of 2 = 30 px following the box model. My columns are 25+25++170+170+100+100+100=690 so 690+30=720. I'm adding 17 for the vertical scroll bar on the right to the div surrounding the gridview.

In addition the issue with the middle gridview, I have a suspicion that the 1st and 3rd gridviews are also not exactly lined up because the width of the main content column is less than the width of the div which surrounds the gridview. Is this possible? If you look closely at the columns you will see that the 4th and 5th columns are pushed over to the right by 1 pixel but the other columns line up exactly. If you look at the left and right edges of the 1st and 3rd gridview, they appear to be flush. The first is 955 header, 972px div before the gridview, and the 3rd is 963 header and 980 div before the gridview. This is from my default.css in my master page below:

.container
{
    width: 100%;
    margin: 0px auto;
}

#content
{
    float: left;
    width: 960px;
    padding: 0em 2em 0em 8em;
}

/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/

#sidebar
{
    float: left;
   width: 340px;
    padding: 2em 8em 0em 0em;
}

Here below is the code

 <div>
                        <table align="center" cellspacing="0" cellpadding="2" rules="all" border="1" id="tblHeader2"
                            style="font-family: Arial; font-size: 10pt; width: 720px; color: black; border-collapse: collapse; height: 100%;">
                            <tr>
                                <td style="width: 25px; text-align: center">
                                    <asp:ImageButton ID="insertbtn2" ImageUrl="~/templates/images/add-icon.png" runat="server" Width="20" Height="20" OnClick="insertbtn2_Click" CausesValidation="False" /></td>
                                <td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>
                                <td style="width: 170px; text-align: center">Name</td>
                                <td style="width: 170px; text-align: center">Type</td>
                                <td style="width: 100px; text-align: center">Payment</td>
                                <td style="width: 100px; text-align: center">Months Left</td>
                                <td style="width: 100px; text-align: center">Omit</td>
                            </tr>
                        </table>
                    </div>
                    <center>
                        <div style="overflow-x: scroll; overflow-y: scroll; height: 100px; width: 737px">
                            <asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource2" AutoGenerateColumns="False" CellPadding="2" HorizontalAlign="Center" OnRowDataBound="Gridview2_rowdatabound" DataKeyNames="otherexpid" RowStyle-Wrap="False" HeaderStyle-Wrap="False" ShowHeader="False" ShowFooter="True" FooterStyle-BackColor="Black" FooterStyle-ForeColor="Black" FooterStyle-Height="2">
                                <PagerStyle Wrap="True" />
                                <RowStyle HorizontalAlign="Center" />
                                <Columns>
                                    <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="editbtn2" ImageUrl="~/templates/images/small-pencil.jpg" runat="server" Width="18" Height="18" OnClick="editbtn2_Click" CommandArgument='<%# Eval("otherexpid") %>' CausesValidation="False" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="deletebtn2" ImageUrl="~/templates/images/delete-icon.png" runat="server" Width="18" Height="18" OnClick="deletebtn2_Click" CausesValidation="False" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="borrower" HeaderText="Borrower" SortExpression="Borrower" ItemStyle-Width="170px" />
                                    <asp:BoundField DataField="type" HeaderText="Type" SortExpression="Type" ItemStyle-Width="170px" />
                                    <asp:BoundField DataField="payment" HeaderText="Payment" SortExpression="Payment" ItemStyle-Width="100px" />
                                    <asp:BoundField DataField="monthsleft" HeaderText="Payment" SortExpression="Mopmt" ItemStyle-Width="100px" />
                                    <asp:BoundField DataField="Omit" HeaderText="Omitted" SortExpression="Omitted" ItemStyle-Width="100px" />
                                </Columns>
                            </asp:GridView>
                        </div>

Answer 1

User-939850651 posted

Hi sking,

This is from my default.css  file below:

According to these css code, I haven't seen them being used in the code, so I'm not sure what effect they have. So I made some modifications to its styles to achieve their alignment.

This is my test:

<head runat="server">
    <title></title>
    <style>
        .container {
            width: 100%;
            margin: 0px auto;
        }

        #content {
            float: left;
            width: 960px;
            padding: 0em 2em 0em 8em;
        }

        .centerDiv {
            margin-left: 8px;
            position:relative;
            left:50%;
            transform:translateX(-50%);
        }

        /*********************************************************************************/
        /* Sidebar                                                                       */
        /*********************************************************************************/

        #sidebar {
            float: left;
            width: 340px;
            padding: 2em 8em 0em 0em;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container" style="min-width:744px">
            <div>
                <table align="center" cellspacing="0" cellpadding="2" rules="all" border="1" id="tblHeader2"
                    style="font-family: Arial; font-size: 10pt; width: 726px; color: black; border-collapse: collapse; height: 100%;">
                    <tr>
                        <td style="width: 25px; text-align: center">
                            <asp:ImageButton ID="insertbtn2" ImageUrl="~/img/pencil.gif" runat="server" Width="20" Height="20" OnClick="insertbtn2_Click" CausesValidation="False" /></td>
                        <td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>
                        <td style="width: 170px; text-align: center">Name</td>
                        <td style="width: 170px; text-align: center">Type</td>
                        <td style="width: 100px; text-align: center">Payment</td>
                        <td style="width: 100px; text-align: center">Months Left</td>
                        <td style="width: 100px; text-align: center">Omit</td>
                    </tr>
                </table>
            </div>
            <%--<center>--%>
            <div style="overflow-x: scroll; overflow-y: scroll; height: 100px; width: 744px" class="centerDiv">
                <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" CellPadding="2" HorizontalAlign="Center" OnRowDataBound="GridView2_RowDataBound" DataKeyNames="otherexpid" RowStyle-Wrap="False" HeaderStyle-Wrap="False" ShowHeader="False" ShowFooter="True" FooterStyle-BackColor="Black" FooterStyle-ForeColor="Black" FooterStyle-Height="2">
                    <PagerStyle Wrap="True" />
                    <RowStyle HorizontalAlign="Center" />
                    <Columns>
                        <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                            <ItemTemplate>
                                <asp:ImageButton ID="editbtn2" ImageUrl="~/img/pencil.gif" runat="server" Width="18" Height="18" CommandArgument='<%# Eval("otherexpid") %>' CausesValidation="False" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                            <ItemTemplate>
                                <asp:ImageButton ID="deletebtn2" ImageUrl="~/img/pencil.gif" runat="server" Width="18" Height="18" CausesValidation="False" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="borrower" HeaderText="Borrower" SortExpression="Borrower" ItemStyle-Width="170px" />
                        <asp:BoundField DataField="type" HeaderText="Type" SortExpression="Type" ItemStyle-Width="170px" />
                        <asp:BoundField DataField="payment" HeaderText="Payment" SortExpression="Payment" ItemStyle-Width="100px" />
                        <asp:BoundField DataField="monthsleft" HeaderText="Payment" SortExpression="Mopmt" ItemStyle-Width="100px" />
                        <asp:BoundField DataField="Omit" HeaderText="Omitted" SortExpression="Omitted" ItemStyle-Width="100px" />
                    </Columns>
                </asp:GridView>
            </div>
        </div>
    </form>
</body>

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable(); 
            if (!Page.IsPostBack) {
                dt.Columns.AddRange(new DataColumn[] {
                    new DataColumn("otherexpid"), 
                    new DataColumn("borrower"), 
                    new DataColumn("type"), 
                    new DataColumn("payment"), 
                    new DataColumn("monthsleft"), 
                    new DataColumn("Omit")
                });
                dt.Rows.Add(1, "borrower1","type1", "payment1", "monthsleft1", "Omit1");
                dt.Rows.Add(2, "borrower2","type2", "payment2", "monthsleft2", "Omit2");
                dt.Rows.Add(3, "borrower3","type3", "payment3", "monthsleft3", "Omit3");
                dt.Rows.Add(4, "borrower4","type4", "payment4", "monthsleft4", "Omit4");

                GridView2.DataSource = dt;
                GridView2.DataBind();
            }
        }

Result:

I think this may be different from your current code. If possible, can you provide more information?

Best regards,

Xudong Peng

Answer 2

User-1767698477 posted

I was able to figure out the math and get things lined up exactly. However the middle gridview is not centered. I have experimented with this and I could not get it to center. I could get the header to center but not the gridview. Is there a way to make it centered? I'm using the HorizontalAlign="Center" property in the gridview, but that is not centered the gridview within the div.

<div>
                        <table>
                            <tr>
                                <td>
                                    <b>2d ~ Other Monthly Expenses</b>
                                </td>
                            </tr>
                        </table>

                        <table cellspacing="0" cellpadding="2" rules="all" border="1" id="tblHeader2"
                            style="font-family: Arial; font-size: 10pt; width: 726px; color: black; border-collapse: collapse; height: 100%;">
                            <tr>
                                <td style="width: 25px; text-align: center">
                                    <asp:ImageButton ID="insertbtn2" ImageUrl="~/templates/images/add-icon.png" runat="server" Width="20" Height="20" OnClick="insertbtn2_Click" CausesValidation="False" /></td>
                                <td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>
                                <td style="width: 170px; text-align: center">Name</td>
                                <td style="width: 170px; text-align: center">Type</td>
                                <td style="width: 100px; text-align: center">Payment</td>
                                <td style="width: 100px; text-align: center">Months Left</td>
                                <td style="width: 100px; text-align: center">Omit</td>
                            </tr>
                        </table>


                        <div style="overflow-x: scroll; overflow-y: scroll; height: 100px; width: 744px" class="centerDiv">
                            <asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource2" AutoGenerateColumns="False" CellPadding="2" HorizontalAlign="Center" OnRowDataBound="Gridview2_rowdatabound" DataKeyNames="otherexpid" RowStyle-Wrap="False" HeaderStyle-Wrap="False" ShowHeader="False" ShowFooter="True" FooterStyle-BackColor="Black" FooterStyle-ForeColor="Black" FooterStyle-Height="2">
                                <PagerStyle Wrap="True" />
                                <RowStyle HorizontalAlign="Center" />
                                <Columns>
                                    <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="editbtn2" ImageUrl="~/templates/images/small-pencil.jpg" runat="server" Width="18" Height="18" OnClick="editbtn2_Click" CommandArgument='<%# Eval("otherexpid") %>' CausesValidation="False" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="deletebtn2" ImageUrl="~/templates/images/delete-icon.png" runat="server" Width="18" Height="18" OnClick="deletebtn2_Click" CausesValidation="False" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="borrower" HeaderText="Borrower" SortExpression="Borrower" ItemStyle-Width="170px" />
                                    <asp:BoundField DataField="type" HeaderText="Type" SortExpression="Type" ItemStyle-Width="170px" />
                                    <asp:BoundField DataField="payment" HeaderText="Payment" SortExpression="Payment" ItemStyle-Width="100px" />
                                    <asp:BoundField DataField="monthsleft" HeaderText="Payment" SortExpression="Mopmt" ItemStyle-Width="100px" />
                                    <asp:BoundField DataField="Omit" HeaderText="Omitted" SortExpression="Omitted" ItemStyle-Width="100px" />
                                </Columns>
                            </asp:GridView>
                        </div>
                    </div>

/** CONTENT */

#content
{
    float: left;
    width: 1000px;
    padding: 0em 2em 0em 8em;
}

.centerDiv 
{
    margin-left: 8px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Answer 3

User-939850651 posted

Hi sking,

I could get the header to center but not the gridview. Is there a way to make it centered?

If it needs to be centered, the header and column should not be aligned due to the width of the scroll bar, but the adjustment of the margin should be able to make it realigned, just like my example above.

.centerDiv 
{
    margin-left: 8px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Have you used this style, it still can't achieve centering?

And I saw this part of the style code, is it used? Is it possible to affect the results?

#content
{
    float: left;
    width: 1000px;
    padding: 0em 2em 0em 8em;
}

Best regards,

Xudong Peng

Answer 4

User-1767698477 posted

Thanks. I was able to get it centered by using  margin-left: 16px in the div. I don't know why the css centerDiv didn't work. Now I'm ust testing the values for length so if they are too wide, I have edited them in gridviewrowdatabound to appropriate size and I add ..

.centerDiv {
    margin-left: 8px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

 <div style="min-width: 744px" align="center">
                        <table>
                            <tr>
                                <td>
                                    <b>2d ~ Other Monthly Expenses</b>
                                </td>
                            </tr>
                        </table>

                        <table cellspacing="0" cellpadding="2" rules="all" border="1" id="tblHeader2"
                            style="font-family: Arial; font-size: 10pt; width: 726px; color: black; border-collapse: collapse; height: 100%;">
                            <tr>
                                <td style="width: 25px; text-align: center">
                                    <asp:ImageButton ID="insertbtn2" ImageUrl="~/templates/images/add-icon.png" runat="server" Width="20" Height="20" OnClick="insertbtn2_Click" CausesValidation="False" /></td>
                                <td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>
                                <td style="width: 170px; text-align: center">Name</td>
                                <td style="width: 170px; text-align: center">Type</td>
                                <td style="width: 100px; text-align: center">Payment</td>
                                <td style="width: 100px; text-align: center">Months Left</td>
                                <td style="width: 100px; text-align: center">Omit</td>
                            </tr>
                        </table>

                        <div style="overflow-x: scroll; overflow-y: scroll; height: 100px; width: 744px; margin-left: 16px">
                            <asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource2" AutoGenerateColumns="False" CellPadding="2" HorizontalAlign="Center" OnRowDataBound="Gridview2_rowdatabound" DataKeyNames="otherexpid" RowStyle-Wrap="False" HeaderStyle-Wrap="False" ShowHeader="False" ShowFooter="True" FooterStyle-BackColor="Black" FooterStyle-ForeColor="Black" FooterStyle-Height="2">
                                <PagerStyle Wrap="True" />
                                <RowStyle HorizontalAlign="Center" />
                                <Columns>
                                    <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="editbtn2" ImageUrl="~/templates/images/small-pencil.jpg" runat="server" Width="18" Height="18" OnClick="editbtn2_Click" CommandArgument='<%# Eval("otherexpid") %>' CausesValidation="False" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="deletebtn2" ImageUrl="~/templates/images/delete-icon.png" runat="server" Width="18" Height="18" OnClick="deletebtn2_Click" CausesValidation="False" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="borrower" HeaderText="Borrower" SortExpression="Borrower" ItemStyle-Width="170px" />
                                    <asp:BoundField DataField="type" HeaderText="Type" SortExpression="Type" ItemStyle-Width="170px" />
                                    <asp:BoundField DataField="payment" HeaderText="Payment" SortExpression="Payment" ItemStyle-Width="100px" />
                                    <asp:BoundField DataField="monthsleft" HeaderText="Payment" SortExpression="Mopmt" ItemStyle-Width="100px" />
                                    <asp:BoundField DataField="Omit" HeaderText="Omitted" SortExpression="Omitted" ItemStyle-Width="100px" />
                                </Columns>
                            </asp:GridView>
                        </div>
                    </div>