how to hide drop down boxes and textfield box when we taking printout of form

  • Profile Image
    arif
    Asked on July 28, 2011 at 02:43 AM
  • Profile Image
    brx250
    Answered on July 28, 2011 at 03:00 AM

    Hi arif,

    Thank you for using JotForm.

    You can hide the dropdown box and textbox by creating a checkbox that asks your users if they would want a printable version. First, hide the print button using conditional logic. When the checkbox is checked, use the conditions to hide the dropdown box and textbox, and unhide the print button. This should work.

    If you do need further clarifications, please feel free to contact us. We will be more than happy to help you.

     

    _____________________________________________
    Albert  JotForm Support
     

  • Profile Image
    abajan
    Answered on July 28, 2011 at 03:29 PM
  • Profile Image
    abajan
    Answered on July 28, 2011 at 09:48 PM

    Hi Arif

    It might just be possible to override the CSS in the print stylesheet with injected CSS. I'll do some experimentation and see what I can come up with but I'm not promising anything.


    ~ Wayne

  • Profile Image
    brx250
    Answered on July 30, 2011 at 10:51 PM

    Hi Arif,

    I've tried creating a form closely the same like I've said previously. You can access the form through this link. http://www.jotform.com/12103007319 

    Let us know if this is what you are referring to.

    We're looking forward to your reply.

    _____________________________________________ 

    Albert JotForm Support 


  • Profile Image
    abajan
    Answered on July 31, 2011 at 05:59 AM

    Arif wants the text inside of the text boxes, text areas and dropdowns to be printed without the chrome. In other words, it should be printed without the borders and (in the case of the dropdowns) arrows:


    Previously, I thought that using the @media print selector in injected CSS might work but discovered that the form builder converts the @ symbol in injected CSS to two slashes. (Probably some sort of security measure.) So, it looks like the full source of the form would need to be embedded and either a ruleset applied to the @media print selector or an external print stylesheet created.


    ~ Wayne

    UPDATE: So far I've been able to come up with something that works :)
    but only in Firefox :(

    After embedding the full source of the form to your page, add the following CSS just after the .form-all rule and before the ending style tag:

    @media print {
      .form-textbox, .form-textarea, .form-dropdown {
        -moz-border-radius:0;
        -webkit-border-radius:0;
        border-radius:0;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        border:none !important;
        -webkit-appearance:none;
      }

      .form-buttons-wrapper {
        display:none;
      }
    }

    (The second rule hides the unnecessary Submit Form and Print Form buttons)

    I'll see if it's possible to update this CSS to be cross browser compliant. Stay tuned!