Hi,

I have a form which has a textarea and file upload field.

The users would like to print the contents of these fields after inputting values.

I tried using window.print() function. I'm using css.

a)It does not print all the contents within the text area. Just prints whatever is displayed on the screen ie; if scrollbars are used, the bottom portion of the text area is not printed.Likewise,if the file path is long, it gets truncated when printed.

These input elements reside within a form.

 Any simple solutions?

Thanks All.
 

Yes, there is a simple solution!

 You can use css styling to create two different "versions" of the page. One for printing, one for the screen. 

If you included the following css links into your document:

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

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

Then you could put the css rules/behavior that you would like.  To make something visible for the screen and hidden for printing, you would need to add a class to both css files, and make the element display '' in the screen css file, and 'none' in the print css file.

 Hope this helps!  If it's confusing, I can try to explain it further :)

- Colin

I have tried it too.  My issue is everything prints within the input elements .

For example: The text inside the text area is printed inside the rectangular box which constitutes the text area size.  So, if the  size of the text area is small, only  the visible part of the text area  is being printed and not all the text entered into the text area which can be seen after scrolling.

Similarly, the "file upload" box is of a particular size. on printing, only that part of the file path which is viewable on the screen is printed and not the whole path. 

I hope I'm clear.

There is no way around that. Printing in web pages is WYSIWYG.

NC...

NC01:

There is no way around that. Printing in web pages is WYSIWYG.

NC...

Yes, there is a way around that: CSS Print Styling.  One of the fundamentals of CSS  is the ability to format a document differently based upon the media/display.  Please do a little research it before you mis-lead others on the subject.

 I have the undermentioned code on my test.aspx page

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

The content I want to include in the print are enclosed under

<div class="print">content I want to print</div> 

 The undermentioned code is my print button:

<asp:Button ID="Button2" runat="server" onclientclick="window.print(); return false;" Text="Print"/> 

Now my print.css file is as under and #left_nav, #right_nav, #heading1 are divs I dont want to print.

body {
  color : #000000;
  background : #ffffff;
  font-family : "Times New Roman", Times, serif;
  font-size : 12pt;
 
}
a {
  text-decoration : underline;
  color : #0000ff;
}
#leftnav, #rightnav, #masthead {
  display : none;
}
.print {visibility:visible;}

My issue as explained in the other posts is to figure out a way to print just the text and not the form elements. So, if one of the fields is "name" , in the printed copy only the text entered in the field for "name" will be printed and not the small rectangular box surrounding the text box.

ColinWhitlatch:

NC01:

There is no way around that. Printing in web pages is WYSIWYG.

NC...

Yes, there is a way around that: CSS Print Styling.  One of the fundamentals of CSS  is the ability to format a document differently based upon the media/display.  Please do a little research it before you mis-lead others on the subject.

So what is the way around printing the contents of a control instead of the control itself using CSS? Maybe YOU should do a little research on it before you mis-lead others on the subject

NC...

I don't even feel like dignifying you with a response, but I'll be the better man here because it helps out the original poster:

The "way around that" is to have a seperate ( different! ) control that contains the content you'd like to print, and hide/display that based upon the css rules.  For displaying on the screen, you show the input controls and hide the controls for printing ( presumably div's).  For printing it's the reverse: hide the input controls and show the printing controls.  The only thing you'll need to do is make sure you keep the print controls in sync with what's in the input textboxes ( easily done with javscript before you call the print function ).

From elsewhere in this forum, I did try javascript, but that just  did not work.I had included a .js file whose contents where:

function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return true;
}

Evidently, I'm having problems doing that. It would be of immense help if you could show with an example.

Ok, here's a quick example I worked up:

<head>
    <title>Test Page</title>
    <style media="print">
        .Print
        {
        }
        .Screen
        {
            display: none;
        }
    </style>
    <style media="screen">
        .Print
        {
            display: none;
        }
        .Screen
        {
        }
    </style>
</head>
<body>
    <div>
        <textarea id="txtLargeAmounts" rows="4" cols="40" class="Screen">
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
            This is a large amount of text
        </textarea>
        <div id="divLargeAmounts" style="overflow: auto;" class="Print">
        </div>
        <input type="file" id="theFile" class="Screen" />
        <div id="divFile" style="overflow: auto;" class="Print">
        </div>
        <input type="button" value="Print!" onclick="doPrint();" class="Screen" />

        <script type="text/javascript">
            function doPrint()
            {
                var txtLargeAmounts = document.getElementById('txtLargeAmounts');
                var divLargeAmounts = document.getElementById('divLargeAmounts');
                
                var theFile = document.getElementById('theFile');
                var divFile = document.getElementById('divFile');
                
                divLargeAmounts.innerHTML = txtLargeAmounts.value;
                divFile.innerHTML = theFile.value;
                
                window.print();
            }
        </script>

    </div>
</body>
</html>

- Colin

Thank you, that solved it.

Though adding the requisite lines to 100's of pages seems to be a boring job. Sometimes, after printing, on navigating to another page and then coming back to the printed page, renders a blank page. I'll sort that out.
 

Great!  Do mark the code as answered so NC... can do a little research later on.

I did have an idea on how to handle this all automatically:

Create a custom javascript routine that runs through all elements on the page.  If it finds an input field, create a div directly after it in the document and copy the input's value into the div..  After that's been done to all inputs, hide them, show the div's, print the screen, then get rid of all the new div's.  Might work, but you might need more control over what get's hidden/shown, and the layout. Dunno. Would be a fun excercise though!

just_life:

Sometimes, after printing, on navigating to another page and then coming back to the printed page, renders a blank page. I'll sort that out.

 When you say "coming back to the printed page", how are you coming back?  It might be possible that your cache still has that old method of doing document.write in it and it's pulling that up and wiping everything out. So try clearing your cache and testing before you rack your brain trying to figure it out.

ColinWhitlatch:

Great!  Do mark the code as answered so NC... can do a little research later on.

Doesn't dignify to answer this.

NC...