[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 260
  • Last Modified:

Display a div in print only, not on screen

How can specify a div on a webpage to not be visible on the screen, but when printed I want the div to print?

I am currently using a print.css file to turn off certain elements, but what I want to do now is the reverse of that.

 Thanks,
0
DanielAttard
Asked:
DanielAttard
  • 3
  • 2
2 Solutions
 
COBOLdinosaurCommented:
in the screen CSS give the element a display attribute:

#myelement {display:none}
and in the print css:
#myelement {display:block}
0
 
Jesse MatlockUX EngineerCommented:
And even more clean approach, instead of loading another style sheet, is to simply add something like this to your current CSS:

@media print {
  /* styles for print go here */
div#to_hide {display:none !important}
}

Open in new window

0
 
COBOLdinosaurCommented:
@cloud9manager,

You are correct, but I believe they have indicated they are already using a separate print stylesheet.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Jesse MatlockUX EngineerCommented:
My apologies ;) That's what I get for reading while my wife is talking to me.. :D
You can continue to use the separate print.css file and do what COBOLdinosaur recommended.

Or you could eliminate the loading of the print.css all together and use something like this within your main.css:

@media print {
    /* styles for print go here */
    div#to_hide {display:block}
}
@media screen {
    /* styles for screen go here */
    div#to_hide {display:none}
}

Open in new window


Again, my apologies for misreading the question.;)
0
 
DanielAttardAuthor Commented:
Thanks for pointing me in the right direction.  Both of your solutions works, but in the end I decided to use this solution and dispense with the loading of the print.css file and instead I put it all in the main css.  I was not familiar with @media print and @media screen until now.

Great stuff.
0
 
Jesse MatlockUX EngineerCommented:
Excellent.. glad that works well for you.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now