Why does the design of a web page change at run time?

Question

I have created a website using asp.net. Everything worked fine until now. But the last page does not behave as i expected. In the UI there is a dropdownlist,gridview,link button and few labels within a collapse bar. Gridview get populated according to the selection of the dropdownlist. In the gridview there is a button and when clicked it, data relevant to the specific row loads into labels. Link button is to view a pdf upload to the system. Problem occurs when click on this link button. As soon as I click on the link button design changes its size of fonts,grid etc. How to stop happening it?

Note : C# code works without any error.
This problem occurs only in one page.

This is my aspx code

<%@ Page Title="" Language="C#" MasterPageFile="~/CDDS_Master.Master" AutoEventWireup="true"
    CodeBehind="agencyAdmin.aspx.cs" Inherits="Claim_Distribution_System.agencyAdmin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="agency" runat="server">
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <script src="JS/jquery.min.js" type="text/javascript"></script>

    <script src="JS/bootstrap.min.js" type="text/javascript"></script>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="div0" runat="server" style="width: 100%; height: auto; margin-top: 15px">
        <asp:Label ID="lblApp" runat="server" Text="Competition :" Style="margin-left: 14px;
            margin-top: 5px">
        </asp:Label>
        <asp:DropDownList ID="ddlComp" runat="server" Style="margin-top: 5px; margin-left: 5px;
            width: 60%; height: auto" AutoPostBack="True" OnSelectedIndexChanged="ddlCompName_SelectedIndexChanged">
        </asp:DropDownList>
    </div>
    <div id="div1" style="width: 100%; height: auto; float: left; margin-left: 10px">
        <asp:GridView ID="grdSum" runat="server" Style="margin-top: 10px;" OnRowDataBound="grdSum_RowDataBound"
            OnRowCreated="grdSum_RowCreated" OnSelectedIndexChanged="grdSum_SelectedIndexChanged"
            CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false">
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" HorizontalAlign="Justify" />
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <HeaderStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="refer" HeaderText="REFERENCE NUMBER">
                    <ItemStyle Width="200px"></ItemStyle>
                    <%--200--%>
                </asp:BoundField>
                <asp:BoundField DataField="BRANCH_CODE" HeaderText="BRANCH">
                    <ItemStyle Width="70px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="SO_CODE" HeaderText="SO">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="APPEAL_CREATE_DATE" HeaderText="CREATE DATE">
                    <ItemStyle Width="120px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="ATTACHMENT_UPLOAD" HeaderText="ATTACHMENT">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:ButtonField Text="Click To View" CommandName="Select">
                    <ItemStyle Width="100px"></ItemStyle>
                </asp:ButtonField>
            </Columns>
        </asp:GridView>
        <asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
    </div>
    <div id="emp" style="width: 100%; height: 20px; float: left">
    </div>
    <div id="col" style="width: 100%; height: auto; margin-left: 5px; float: left">
        <div class="container">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Basic Appeal Info</a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <div id="col1Body" style="width: 95%; height: auto;">
                                <div id="inner1" style="width: 98%; height: auto; float: left">
                                    <asp:Label ID="Label1" runat="server" Style="width: 35%; margin-left: 43px" Text="Reference No :"></asp:Label>
                                    <asp:Label ID="lblRef" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
                                </div>
                                <div id="inner2" style="width: 98%; height: auto; float: left; margin-top: 10px">
                                    <asp:Label ID="Label2" runat="server" Style="width: 35%; margin-left: 20px" Text="Competion Name :"></asp:Label>
                                    <asp:Label ID="lblComName" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
                                </div>
                                <div id="inner3" style="width: 98%; height: auto; float: left; margin-top: 10px">
                                    <asp:Label ID="Label3" runat="server" Style="width: 35%; margin-left: 48px" Text="Branch Code :"></asp:Label>
                                    <asp:Label ID="lblBranch" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
                                </div>
                                <div id="inner4" style="width: 98%; height: auto; float: left; margin-top: 10px">
                                    <asp:Label ID="Label4" runat="server" Style="width: 35%; margin-left: 72px" Text="SO Code :"></asp:Label>
                                    <asp:Label ID="lblSo" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
                                </div>
                                <div id="inner5" style="width: 98%; height: auto; float: left; margin-top: 10px">
                                    <asp:Label ID="Label6" runat="server" Style="width: 35%; margin-left: 74px" Text="Remarks :"></asp:Label>
                                    <asp:Label ID="lblRemarks" runat="server" Style="width: 90%; height: auto; text-align: justify;
                                        margin-left: 10px;" Text="Reference No :"></asp:Label>
                                </div>
                                <div id="inner6" style="width: 80%; height: auto; float: left; margin-top: 10px;
                                    margin-left: 10%; margin-bottom: 10px">
                                    <div id="inner61" style="width: 30%; height: auto; float: left; margin-left: 100px">
                                        <asp:GridView ID="grdKPI" runat="server" Style="margin-left: 5px; margin-top: 5px;
                                            margin-bottom: 10px; float: left; border-color: #9B0423; border-width: medium;
                                            width: 50%; text-align: center;" OnRowDataBound="grdKPI_RowDataBound">
                                            <HeaderStyle BackColor="#9B0423" ForeColor="White" />
                                            <AlternatingRowStyle BackColor="#FFE6E6" />
                                        </asp:GridView>
                                    </div>
                                    <div id="inner62" style="width: 30%; height: auto; float: left; margin-left: 10px">
                                        <asp:GridView ID="grdPolicyDetails" runat="server" Style="margin-top: 5px; margin-bottom: 10px;
                                            float: left; border-color: #9B0423; border-width: medium; width: 50%; text-align: center"
                                            OnRowDataBound="grdPolicyDetails_RowDataBound">
                                            <HeaderStyle BackColor="#9B0423" ForeColor="White" />
                                            <AlternatingRowStyle BackColor="#FFE6E6" />
                                        </asp:GridView>
                                    </div>
                                </div>
                                <div id="empty" style="width: 100%; height: auto; float: left">
                                    <asp:Label ID="Label8" runat="server" Style="width: 35%; margin-left: 25px" Text="View Attachment :"></asp:Label>
                                    <asp:LinkButton ID="pdfViewAdmin" runat="server" Style="margin-left: 10px" OnClick="pdfViewAdmin_Click">View PDF</asp:LinkButton>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">LOP</a>
                        </h4>
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div id="colBody2" style="width: 95%; height: auto;">
                                <div id="inner7" style="width: 98%; height: auto;">
                                    <asp:Label ID="Label5" runat="server" Style="width: 35%; margin-left: 43px" Text="Remarks :"></asp:Label>
                                    <asp:Label ID="lblRemarksLOP" runat="server" Style="width: 90%; margin-left: 10px"
                                        Text="Reference No :"></asp:Label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Accountant</a>
                            </h4>
                        </div>
                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div id="colBody3" style="width: 95%; height: auto;">
                                    <div id="inner8" style="width: 98%; height: auto;">
                                        <asp:Label ID="Label7" runat="server" Style="width: 35%; margin-left: 43px" Text="Remarks :"></asp:Label>
                                        <asp:Label ID="lblRemarksAcc" runat="server" Style="width: 90%; margin-left: 10px"
                                            Text="Reference No :"></asp:Label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

Here are images before the link button click and after link button click

Link button click event

protected void pdfViewAdmin_Click(object sender, EventArgs e)
{
     Response.Write(string.Format("<script>window.open('{0}','_blank');</script>", "viewPDF.aspx"));
     lblComName.Visible = true;
     lblBranch.Visible = true;
     lblSo.Visible = true;
}

Can you show a method `pdfViewAdmin_Click`? Or if you change OnClick="pdfViewAdmin_Click" to some enother method which do nothing, does behavior change? — Fabio, Sep 29 '16 at 05:19
@Fabio, I commented the code inside the pdfViewAdmin_Click and click the link button. Nothing changed in the design. — Mike, Sep 29 '16 at 06:00
Ok i i will add the code for pdfViewAdmin_Click now. Please check the question after few minutes. — Mike, Sep 29 '16 at 06:01

score 0 · Answer 1 · answered Sep 29 '16 at 07:05

Following change solved my problem.

 protected void pdfViewAdmin_Click(object sender, EventArgs e)
 {
       //Response.Write(string.Format("<script>window.open('{0}','_blank');</script>", "viewPDF.aspx"));
        this.ClientScript.RegisterStartupScript(this.GetType(), this.GetType().Name, string.Format("window.open('{0}', '_blank');", "viewPDF.aspx"), true);
        lblComName.Visible = true;
        lblBranch.Visible = true;
        lblSo.Visible = true;
        lblRef.Visible = true;
        lblRemarks.Visible = true;
}

Commented line is code i had earlier. And the line below it is the new code and it worked.
This is where i found the answer
Click to view the page

Why does the design of a web page change at run time?

1 Answers1