print a page with scrolling <div>


M

Martin Nadoll

Hello,

i have a page with a div-Tag, positioned absolute, overflow:auto that shows
a scrollbar, because content is to big.

Now i have a button on that page called "print page".
That is only a <a href"javascript:window.print()"> command.

My problem:
It prints only the on screen shown part of my content, not the whole
content, which is, what i want to print.

Is there any workaround for that problem?
Maybe something with css-media?

Thanks for any help,
Martin Nadoll
 
Ad

Advertisements

S

Spartanicus

Martin Nadoll said:
i have a page with a div-Tag, positioned absolute, overflow:auto that shows
a scrollbar, because content is to big.

Get rid of it, "scrolling divs" are a usability nightmare. Scrolling
with the wheel of a mouse is poorly supported, keyboard users cannot
scroll it at all.

Place a small bit of the content on the page followed by a "... More"
link that links to the full text.
Now i have a button on that page called "print page".
That is only a <a href"javascript:window.print()"> command.

Replicating a function found on all browsers serves no purpose, using
javascript is even more silly since a significant number of clients will
have javascript disabled.
 
?

=?ISO-8859-1?Q?Dav=E9mon?=

Martin said:
Hello,

i have a page with a div-Tag, positioned absolute, overflow:auto that shows
a scrollbar, because content is to big.


My problem:
It prints only the on screen shown part of my content, not the whole
content, which is, what i want to print.

Is there any workaround for that problem?
Maybe something with css-media?

Something like:

<link rel="stylesheet" href="print.css" type="text/css" media="print">

in your html, and:

#whatever_id_your_div_is
{overflow:none;}

in the print.css

should solve that.
 
N

Neredbojias

With neither quill nor qualm, =?ISO-8859-1?Q?Dav=E9mon?= quothed:
Something like:

<link rel="stylesheet" href="print.css" type="text/css" media="print">

in your html, and:

#whatever_id_your_div_is
{overflow:none;}

in the print.css

should solve that.

Perhaps "overflow:visible;" would be better.
 
Ad

Advertisements

?

=?ISO-8859-1?Q?Dav=E9mon?=

Neredbojias said:
With neither quill nor qualm, =?ISO-8859-1?Q?Dav=E9mon?= quothed:




Perhaps "overflow:visible;" would be better.

My apologies. Yes "overflow:visible;" is correct.

Also set "height:auto;" if you're not declaring the screen css
explicitly as such (i.e. the #whatever_id_your_div_is is inheriting a
height value from another definition), otherwise it will overlap any
content below, instead of forcing it down.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top