CODEWITHSUNDEEP
javascripthtmlcss
Headed North
Headed North

Reputation: 1

HTML page printing

I have a dynamic page that displays members information and their photos from a database. My problem is that when a user prints the page it sometimes cuts off a members information and prints the rest on the next page. Is there a way to force a page size or something that won't allow information to be spread over two pages? Maybe Javascript or CSS?

Upvotes: 0

Views: 37

Answers (4)

ltdavids
ltdavids

Reputation: 11

If you enclose your member info and pictures inside a div or other block, you can use the page-break-inside CSS property similar to below.

HTML

<div class="member-info">
    ....
</div>

CSS

.member-info {
    page-break-inside: avoid;
}

MDN documentation for page-break-inside

Upvotes: 1

DirtyBit
DirtyBit

Reputation: 16792

Nice and simple!

@media screen {
  body {
    width: 75%;
  }
}

@media print {
  body {
    width: 100%;
  }
}

For a deeper study: CSS Media Queries & Using Available Space and Use CSS media queries for responsiveness

Upvotes: 0

DivideByZero
DivideByZero

Reputation: 545

You can use CSS and media queries to style your page when it's being printed.

It would look something like this (I don't know how your exact HTML looks):

@media print {
  body {
    width: 100%;
  }
}

You can read more about it here:

https://css-tricks.com/css-media-queries/

http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/

Upvotes: 0

AleshaOleg
AleshaOleg

Reputation: 2211

You can set a page for print with media queries feature @media print.

Upvotes: 0

Related Questions