• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

CSS classes for hiding from screen not quite working (ASP4)

We have this in our css file:
@media print
{
  .NoPrint
  {
    display:none;
  }

  .YesPrint
  {
    display:inline;
  }
}
     
@media screen
{
  .NoPrint
  {
    display:inline;
  }

  .YesPrint
  {
    display:none;
  }
}

Open in new window

On some pages, we want some controls to be seen on the screen but not printed (like a print button, for example). In those, we assign the CssClass="NoPrint" and it works fine.
Other controls, we want to be seen by the printer, but not by the screen (like a label that has the value of a textbox, so that you see the textbox but print the label). But these don't work. I was wondering if anyone knew why, or some workaround.
0
Cluskitt
Asked:
Cluskitt
  • 14
  • 12
2 Solutions
 
LZ1Commented:
Have you tried creating a separate CSS file for just print and then calling it like this;

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

Open in new window

0
 
CluskittAuthor Commented:
I'm not sure how that would help. The styles file is loaded into the master page. I've tried deleting every other style other than those two and the same thing happened. Also, the NoPrint works fine. It's just the YesPrint (which is basically reversed from the NoPrint) that isn't working. That is, it shows on print, but also on screen.
0
 
EMB01Commented:
If the method you're using isn't working, you could try duplicating your stylesheet, modifying all the appropriate styles accordingly, and then importing it:

@import url(paged.css) print,projection;

Or, you could try linking to it:

<LINK rel="stylesheet" type"text/css"
     href="print.css" media="print,projection">
@import url(print.css) print,projection;

Ref.  http://meyerweb.com/eric/articles/webrev/200001.html
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
CluskittAuthor Commented:
Well, the problem seem to be that it's not respecting the "display: none" command for the screen media. I'm not sure why.
0
 
EMB01Commented:
Yes, I don't know why that would be right now.  But, you should try another method to see if maybe you can get it to work that way.
0
 
CluskittAuthor Commented:
Any suggestions for a printing method in ASP.Net 4 pages? I've tried searching for one, but mostly they either print a text or an external document and not the page itself. I would rather not have to rely a lot on javascript. Just a simple hide/show stuff, print and reverse hide/show...
So far, all solutions are based on having a duplicate page so you can open it in a popup, which isn't very efficient.
0
 
EMB01Commented:
I recommend trying the CSS methods mentioned above but it would be possible to use javascript to simply change the stylesheet; i.e. they click "printer friendly" and thee stylesheet switches to another stylesheet made for print.  This way, you don't have duplicate content, just different stylesheets with which to view the content for the specific medium the user requests.

There are many ways to do this:

http://www.alistapart.com/articles/alternate/

also, with jQuery:

http://webdevcodex.com/how-to-switch-to-an-alternate-stylesheet-using-jquery/
0
 
CluskittAuthor Commented:
Well, supposedly, having a stylesheet for screen and one for print would achieve the same effect. The problem here is still that controls that have block: none for screen media are still displayed.
0
 
EMB01Commented:
If I were you and the alternative style methods weren't working and need a quick fix, I would try adding a jQuery button that, when clicked, would add "display: none" to all the specific elements that are not printer friendly.
0
 
CluskittAuthor Commented:
Well, a quick fix isn't really what I need. I need a decent fix, even if it does involve using some other method (like a popup window). I was just wondering if this ever happened to anyone and why it might be like this. After all, this is part of the standard, so there's no reason for it not to work.
0
 
EMB01Commented:
Usually, in my experience, stuff like this is caused by improper document declaration.  Send me your full (X)HTML and I'll check it.
0
 
CluskittAuthor Commented:
Ok, I'll do that on monday.
0
 
CluskittAuthor Commented:
AlteracoesHorario.aspx Site.master
Ok, I've uploaded one page with a label that has that class. Also, uploaded the site master.
0
 
EMB01Commented:
Okay, your doctype declaration looks good to me but there are some other things to consider:

-  check your path to your stylesheet.  try using a root path
-  check your stylesheet(s) for errors http://jigsaw.w3.org/css-validator/

if your stylesheet has errors, it won't work.
0
 
CluskittAuthor Commented:
Stylesheet path is good, as proven by the fact that NoPrint class works (those controls don't get sent to the printer). I've tested the stylesheet on the above path and it returns no errors for CSS 2, 2.1 and 3 (only for 1 does it generate errors, but we're not using that one).
0
 
EMB01Commented:
Do you have an online sample or demo that I could see?  If you're sure the paths are correct, maybe try using visibility instead of display, i.e.

visibility: hidden;

and

visibility: visible;

If something is conflicting with the style, try using !important after the style like this:

visibility: hidden !important;
0
 
CluskittAuthor Commented:
I'm sure the path is correct. I've tried deleting everything in the css file except for the print and screen classes (and the style defined in the page master) so that the styles applied are only those two and all the layout becomes basic. Still doesn't work for screen.
I tried creating a new page:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
    @media print
    {
      .NoPrint
      {
        display: none;
      }
    
    }
    
    @media screen
    {
      .YesPrint
      {
        display: none;
      }
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label Text="textYes" CssClass="YesPrint" runat="server" />
    <asp:Label Text="textNo" CssClass="NoPrint" runat="server" />
  </div>
  </form>
</body>
</html>

Open in new window

And this way it works. Tried also:
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:Label ID="Label1" Text="textYes" CssClass="YesPrint" runat="server" />
    <asp:Label ID="Label2" Text="textNo" CssClass="NoPrint" runat="server" />
</asp:Content>

Open in new window

This also works. So, I'm kinda stumped. Not sure what happens in that page that generates this difference in behaviour.
0
 
EMB01Commented:
Well if you have an online version we can look at it.  Do you use firefox firebug?
0
 
CluskittAuthor Commented:
I have firebug installed, though I rarely use it. I usually run the site in debug mode, so VWD takes care of it for me.
We don't have an online version. This will be for intranet use and right now it's still in development mode, being confined to access from 2 pcs.
0
 
EMB01Commented:
It's difficult to fix if it's not on a live server.  So to confirm, the problem is not that the print styles don't work, but that the screen styles don't work?
0
 
CluskittAuthor Commented:
Well, the screen styles work, but not all the time. That is, they don't work on the pages we have working (or at least, the couple we tried it on, which is where we need this), but if I create a new page and just add a couple labels, it works fine.
0
 
CluskittAuthor Commented:
Ok, new development and this gets much weirder.
This works:
<asp:Label ID="Label3" Text="textYes" CssClass="YesPrint" runat="server" />
This doesn't:
<asp:Label ID="Label3" Text="textYes" Width="50px" CssClass="YesPrint" runat="server" />

When I set Width it shows on the screen.
0
 
EMB01Commented:
Probably because width overrides the display property or something...  did you try using visibility instead of display?
0
 
CluskittAuthor Commented:
No, but we've discovered a way to make this work. Instead of using Width, we changed to style="width:
This enables us to set a width and still hide it.
0
 
EMB01Commented:
Great, sorry I couldn't help you more.
0
 
CluskittAuthor Commented:
Despite reaching a solution on my own, your assistance was invaluable. So I'm awarding you the points. Thanks for the help.
0
 
EMB01Commented:
I appreciate that!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 14
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now