Print Stylesheet - Converting inputs to text

Question

I've got a table that has some <input type="text"> boxes in it, and I want these to show as normal text when printing. I have set up a media="print" stylesheet with

input
{
border-style: none;
}

in it, and this removes the border so the content just looks like text, but the input is still pushing the width of the column to its actual width (not surprisingly) so I get unnecessary empty space and column widths. Is there a funky way to somehow either set the input's width to its content size using CSS, or some other way to fix this?

Someone on another forums suggested using a print button which creates client side scripting to physically change the page markup, but unfortunately that's not really practical due to the complexity and dynamic nature of the page.

I'm pretty sure this can't be done, but I thought I'd ask.

Answer 1

Nope, I don't think this can be done without some scripting. But the scripting would be really easy to achieve with a Framework like Jquery:

• For each input element, you would create a <span> next to it and give it a class that is hidden in the media="screen" stylesheet, and visible in media="print".

• The input element itself would get a class that works the other way round, visible in screen and hidden in print.

• Each input element would get a change event that updates the neighboring span.

I don't have the JQuery routine yet to pull this out of my sleeve, and not the time to put it together right now, but it is definitely solvable and still quite unobtrusive - no need to execute any scripting when the user starts printing.

I bet if you re-tag the question or ask a new one, one of our resident JQuery gurus will take a look at it :)

Answer 2

If you are using Bootstrap:

@media print {
  .no-print {
    display: none !important;
  }

  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
  }
}

Answer 3

I came across this searching for information on how to style my forms and a few other things.

After messing with some CSS I figured out a CSS only method that works for me.

My forms all have styling that involved color background and a border that is black.

In my print CSS file I copied my form css and changed all of the colors (not the text itself) to white. In other words it hides my text box and displays only the text.

Original CSS - #form textarea, #form input, #form select{ border:1px solid #ddd; color:#313131; }

Print CSS - #form textarea, #form input, #form select{ border:1px solid #fff; color:#fff; }

Works like a charm =>

Hope this Helps

Answer 4

input { border-style: none; display: inline}

Answer 5

I'm using ASP.NET and had the same issue.

I solved it by adding a Label that corresponds to my Textbox, and had two classes set up:

In @media screen:

.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}

In @media print:

.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}

For the textbox, I assigned the hdnPrint class, and on the label, I assigned the visPrint class. When the user prints the form, the label is displayed and the form field is hidden.

I assume you can do something similar in a non-ASP.NET environment by following the same pattern.

No scripting required.

Answer 6

To define the width of the input fields in the CSS print section, use:

width: ?cm 

for the corresponding input elements.

Tested in Firefox; maybe it wasn't working in previous versions of the browser.

Answer 7

For bootstrap this works for me. It is based on user5712635s answer but I added the appearance properties to get rid of the down arrows on selection inputs.

@media print {    
  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}