You need to remove the style attribute from panelBody tag. I haved added the Id to div which is having this class panelbodydiv.
I have added your panel content to test it.
HTML
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #0DA9D0;
border-radius: 12px;
padding: 0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
padding: 5px;
}
.modalPopup .footer
{
padding: 3px;
}
.modalPopup .button
{
height: 23px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
.modalPopup td
{
text-align: left;
}
</style>
<script type="text/javascript">
function PrintPanel() {
var panel = document.getElementById("<%=pnlPopup.ClientID %>");
var panelBody = document.getElementById("panelbodydiv");
panelBody.style.height = "";
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 500);
panelBody.style.height = "390px";
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="OnSelectedIndexChanged">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblCountry" Text='<%# Eval("Country") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField Text="Select" CommandName="Select" />
</Columns>
</asp:GridView>
<asp:LinkButton Text="" ID="lnkFake" runat="server" />
<cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkFake"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div>
<div class="headerdiv">
<table width="100%">
<tr>
<td style="width: 70%; text-align: left; padding-top: 7px; padding-left: 20px">
<span style="color: #104E8B; font-size: 30px;">Invoice</span> <span style="font-size: 30px;">
Details</span>
<asp:Label ID="lblId" runat="server"></asp:Label>
</td>
<td style="width: 30%; padding-right: 10px; padding-top: 7px;">
<asp:HyperLink ID="cancel" runat="server" CssClass="close" NavigateUrl="~/List.aspx">×</asp:HyperLink>
</td>
</tr>
</table>
</div>
<br />
<div class="panelbodydiv" id="panelbodydiv" style="width: auto; overflow: auto; height: 390px; overflow-x: hidden">
<div>
<table width="100%">
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Reference No.</span>
</td>
<td>
<asp:TextBox ID="txtRefNo" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblRefNo" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtRefNo"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Date</span>
</td>
<td>
<asp:Label ID="lblDate" runat="server"></asp:Label>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Time</span>
</td>
<td>
<asp:Label ID="lblTime" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
<hr style="width: 98%; border: 1px solid gray; margin-left: -5px;" />
<div>
<table width="100%">
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>P.O. Number</span>
</td>
<td>
<asp:TextBox ID="txtPONo" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblPONo" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPONo"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Customer Number</span>
</td>
<td>
<asp:TextBox ID="txtCustNo" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblCustNo" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtCustNo"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</div>
<hr style="width: 98%; border: 1px solid gray; margin-left: -5px;" />
<div>
<table width="100%">
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Salesman</span>
</td>
<td>
<asp:Label ID="lblSalesman" runat="server"></asp:Label>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Type of Sale</span>
</td>
<td>
<asp:TextBox ID="txtTypeOfSale" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblTypeOfSale" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtTypeOfSale"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Tax Code</span>
</td>
<td>
<asp:TextBox ID="txtTaxCode" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblTaxCode" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtTaxCode"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Ship VIA</span>
</td>
<td>
<asp:TextBox ID="txtShpVia" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblShpVia" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtShpVia"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</div>
<hr style="width: 98%; border: 1px solid gray; margin-left: -5px;" />
<div>
<table width="100%">
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Quantity</span>
</td>
<td>
<asp:TextBox ID="txtQty" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblQty" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="txtQty"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Part Number and Description</span>
</td>
<td>
<asp:Label ID="lblDescription" runat="server"></asp:Label>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Unit Price</span>
</td>
<td>
<asp:TextBox ID="txtUnitPrice" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblUnitPrice" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="txtUnitPrice"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Extension</span>
</td>
<td>
<asp:TextBox ID="txtExtension" runat="server" Width="50%" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblExtension" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtExtension"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</div>
<hr style="width: 98%; border: 1px solid gray; margin-left: -5px;" />
<div>
<table width="100%">
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Tax</span>
</td>
<td>
<asp:TextBox ID="txtTax" runat="server" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblTax" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server" ControlToValidate="txtTax"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Total</span>
</td>
<td>
<asp:TextBox ID="txtTotal" runat="server" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblTotal" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ControlToValidate="txtTotal"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr class="rowstyle">
<td style="width: 40%; color: #104E8B;">
<span>Received By</span>
</td>
<td>
<asp:TextBox ID="TxtRecvdBy" runat="server" CssClass="txtstyle"></asp:TextBox>
<asp:Label ID="lblRecvBy" runat="server" Visible="false"></asp:Label>
<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="TxtRecvdBy"
ValidationGroup="uservalid" ErrorMessage="*" ForeColor="Red" Font-Bold="true"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</div>
</div>
<br />
<div class="footerdiv">
<table width="100%">
<tr>
<td style="width: 50%; text-align: right; padding-top: 7px;">
<asp:Button ID="btnSave" runat="server" Text="Save & Next" CssClass="btn btn-primary"
ValidationGroup="uservalid" />
<asp:Button ID="btnPrint" runat="server" Text="Print" CssClass="btn btn-primary"
OnClientClick="return PrintPanel();" />
</td>
<td style="width: 50%; padding-top: 7px;">
<asp:Button ID="btnclose" runat="server" Text="Close" CssClass="btn btn-primary" />
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
</form>
</body>
</html>
Namespace
using System.Data;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
lblId.Text = GridView1.SelectedRow.Cells[0].Text;
lblSalesman.Text = GridView1.SelectedRow.Cells[1].Text;
mpe.Show();
}
Screenshot
Printed Document.
