Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In ASP.NET pages that you want to prepare for printing, there are times when there are elements that you see on the screen that you don't want to appear on the page. In this example, I'm working with the file SuppressingElements.aspx. I'll press Ctrl+F5 to run the page in the browser and then I'll show the same page in Print Preview. Notice that the menu, that is, the elements on the page that appear on the screen that allows the user to navigate around the website, also appear on the printed page. I would like to suppress that element, so it doesn't appear when the document is printed. There are two steps you have to follow for this. First of all, the element that you want to hide must have a unique ID and that unique ID can't change each time the page loads.
You have to deal with the actual HTML elements and so you might have to do a little bit of diagnosis on your page to find out how the element IDs are being generated. Let's run the page again. This time when the page appears in the Internet Explorer, I'm going to right-click on the page and select View Source and then I'll press Ctrl+F and I'll search for the string home and I'll jump to the anchor tags that constitute the menu. I would like to hide this div tag. Notice that it's being generated with an ID of ct103_menuPanel. If you are following the same steps on your computer, you might find that ID is different on your system and the reason is because this content is generated by the Header element. That is, the custom control that I'm using in my page. And if I go back to my source code in SuppressingElements.aspx and I'll press Alt+Shift+Enter to go to full screen, I'll see that my use of the Header control right here doesn't have an ID attribute because I haven't applied an ID. ASP.NET applies one for me and if I can't predict what that id is going to be, then I can't apply its Cascading Style Sheet rules to it appropriately.
So the first part of getting ready to suppress this entire header is to give it an ID. I'll put in an ID element and I'll set it to a value of myHeader. Now, I'll save the changes and I'll run the page again. And once again, I'll View Source on the page, press Ctrl+F, search for home and now I see that the div tag id is my myHeader_menuPanel. This is an id that will always be the same. So now I'm going to select that ID in my View Source editor and copy it to the clipboard, because I'm going to use that ID in a Cascading Style Sheet rule.
Now I'll close the browsers and return to Visual Web Developer and get out of full screen. Now I'll go to the printstyles.css file and I'll open that code up in full screen and I'm going to add a new selector into my Cascading Style Sheet file. This is going to be an ID selector. I will put on the pound sign and then paste in the ID of my div tag that's being generated when the .NET page is being rendered. Cascading Style Sheet ID selectors apply to only a single element. You prefix the selector name with the pound sign just like you use a dot for a Cascading Style Sheet class, but unlike a class which can apply to multiple elements, ID selectors are designed to apply to only one, then I'll put in the pair of braces and I'll add the following properties.
First of all, Visibility, which I'll set to a value of hidden. This means that when I print the document, the menu won't appear and I'm also going to shrink the menu down to a tiny size like this. I'll put in the height of 0 pixels and a width of 0 pixels. Now this technique won't work on all browsers. I'll show you that on Internet Explorer the panel size won't actually change, but then I'll show you on Firefox that it does and then go back to SuppressingElements.aspx.
In this file's begin state, it already has the links to the multiple style sheets. Styles.css for rendering on the screen and printstyles.css for rendering on the printer. I'll run the page and you will see that when you render the page on the screen that the menu is intact and still visible and then I'll look at the same page using Print Preview. I'll right-click on the page and select Print Preview and expand the width of the page and you will see that the menu is gone and it's only gone when you actually print the document. Now on Internet Explorer, what you are seeing is that the visibility element does fine, but the width and height of the elements are still the same. This extra vertical space in the page above the title is reserved for that menu even though it's not visible.
But now I'll close Print Preview and I'll go into Internet Explorer's address bar and I'll copy the current URL to the clipboard. Then I'll open up Firefox and I'll paste that URL into Firefox and you will see that the page looks pretty much the same on the screen as it did in the Internet Explorer. But then in Firefox I'll go to the menu and select File > Print Preview and you will see that in Firefox, the height and width attributes do work, setting the height to 0 and the width to 0 pixels each means that the element is completely gone from the printed document.
So to find cross-browser solutions to printing documents from HTML, you will have to do a little bit of experimentation and research. I do encourage you to test these pages on multiple browsers. Whichever browser your users are going to be using to access your website, you will want to make sure you have copies of those browsers and that you have tested the pages in all of the different ways that you are planning for them to be used, both rendered on the screen and printed on the printer.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98588 Viewers
61 Video lessons · 85887 Viewers
71 Video lessons · 69766 Viewers
56 Video lessons · 102075 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.