To hide a button while printing we can use the style “display:none;”. But this will not work if the the button is disabled. Even after applying style “display:none;” to a disabled button it will get printed.
While printing any web page usually we don’t print the whole page we see. So we declare some styles which are applied only at the time of printing. One of the ways of doing this is to create a new style sheet which will contain print specific styles.
A print specific style sheet can be linked by specifying the media attribute to print.
<link href="StyleSheets/PageNameStyle.css" rel="stylesheet" type="text/css"/> This style sheet will contain normal web page class declarations.
<link href="StyleSheets/PageNamePrintStyle.css" rel="stylesheet" type="text/css" media="print" /> This style sheet will contain print specific class declarations.
Now assume we have a button whose id is “btnDemoPrint” and this is a disabled button supposed to be hidden while printing.
For example in PageNameStyle.css we have following declaration.
And in PageNamePrintStyle.css we have following declaration
So when user will print the page, the button is expected to be hidden. But this will not happen. The button will be there on the paper.
In order to hide this button apply the extra line as shown below
Now when you will print the page, the disabled button will not be shown.