I have a asp:listbox control in my web page and when I print the page using javascript print() method, the list box values overflows through the page overlaping through the other text in the page.
The problem could be with the style attributes inside the div
So you should remove any thing, I removed the style attribute from the div tag that containing the list box
So it was OK to print it
If you only want to show output inside a box, you can use just the attribute in style values that only deals with the border
or use a table, set its border to 1, this way the printing will be fine.
The absolute positioning is highly not-recommended as web pages have to deal with different screen layouts
I figured out this is IE related issue, I am using IE 9. So i added the following code to the header and it solved the issue, except one item overflows through the control.
vasanth2K13
0 Points
4 Posts
Lisltbox overflows the items while printing through a printer
Jan 03, 2013 04:28 PM|LINK
Hi,
I have a asp:listbox control in my web page and when I print the page using javascript print() method, the list box values overflows through the page overlaping through the other text in the page.
Here is a simple example code
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div id='hello' style="Z-INDEX: 102; LEFT: 13px; OVERFLOW: auto; WIDTH: 247px; POSITION: absolute; TOP: 62px; HEIGHT: 134px" > <asp:ListBox ID="ListBox1" runat="server"> <asp:ListItem>One</asp:ListItem> <asp:ListItem>Two</asp:ListItem> <asp:ListItem>Three</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> <asp:ListItem>6</asp:ListItem> <asp:ListItem>7</asp:ListItem> <asp:ListItem>8</asp:ListItem> <asp:ListItem>9</asp:ListItem> <asp:ListItem>10</asp:ListItem> <asp:ListItem>11</asp:ListItem> <asp:ListItem>12</asp:ListItem> <asp:ListItem>13</asp:ListItem> <asp:ListItem>14</asp:ListItem> </asp:ListBox> </div> <asp:Button ID="btnPrint" runat="server" Text="Print" CausesValidation="false" OnClientClick="window.print();return false;" /> </form> </body> </html>
Use this code and print it through a printer.
usman400
Contributor
3513 Points
721 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 04, 2013 04:03 AM|LINK
try putting the list box in a <p> tag then try
vasanth2K13
0 Points
4 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 04, 2013 03:13 PM|LINK
Usman,
Thanks for the Reply, But still using <p> dosen't make any change when printing the control.
Thanks,
Vasanth
usman400
Contributor
3513 Points
721 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 04, 2013 04:39 PM|LINK
Can u post the markup here ?
I mean when the page is loaded, view its source, and copy paste here
raju dasa
Star
14320 Points
2440 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 04, 2013 05:19 PM|LINK
Hi,
Try like this:
OnClientClick="document.getElementById('hello').print();return false;"if thats not satisfies,
try removing absolute positioning on 'hello' div or use overflow:visible;
rajudasa.blogspot.com || blog@opera
vasanth2K13
0 Points
4 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 04, 2013 06:07 PM|LINK
Hi Usman,
Here is the markup,
<!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><title>
</title></head> <body> <form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTcyMjM1MjIyN2RkGF7YlHaOztakBDtT4W1jNc0EC8Y=" /> </div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWEAKanaqLBQLPu7CmDwLmst8nAoiJyIgFArHWyeIFArbWyeIFArfWyeIFArTWyeIFAqXWyeIFAqrWyeIFArLWieEFArLWheEFArLWgeEFArLWveEFArLWueEFAv7pjKgK71XRqOcVEBO1OnKYFaYAAzTCbOc=" /> </div> <div id='hello' style="Z-INDEX: 102; LEFT: 13px; border: 1px solid black; OVERFLOW: visible; WIDTH: 247px; POSITION: relative; TOP: 62px; HEIGHT: 134px" > <select size="4" name="ListBox1" id="ListBox1"> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option>
</select> </div> <input type="submit" name="btnPrint" value="Print" onclick="window.print();return false;" id="btnPrint" /> </form> </body> </html>
roopeshreddy
All-Star
20119 Points
3320 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 05, 2013 12:55 AM|LINK
Hi,
I tried printing using your code and it worked fine for PDF and XPS.
While printing i just selected PDF Write to print to PDF and same for XPS!
Are you only getting that weird behaviour only while printing through Printer?
Roopesh Reddy C
Roopesh's Space
usman400
Contributor
3513 Points
721 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 05, 2013 11:13 AM|LINK
The problem could be with the style attributes inside the div
So you should remove any thing, I removed the style attribute from the div tag that containing the list box
So it was OK to print it
If you only want to show output inside a box, you can use just the attribute in style values that only deals with the border
or use a table, set its border to 1, this way the printing will be fine.
The absolute positioning is highly not-recommended as web pages have to deal with different screen layouts
vasanth2K13
0 Points
4 Posts
Re: Lisltbox overflows the items while printing through a printer
Jan 07, 2013 04:19 PM|LINK
Hi Usman/Roopesh,
I figured out this is IE related issue, I am using IE 9. So i added the following code to the header and it solved the issue, except one item overflows through the control.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Thanks,
Vasanth