Printing Forms with Checkboxes

  1. #1

    Printing Forms with Checkboxes

    I had an issue when printing forms with checkboxes where the checkbox marks would not print. This looks like an issue with the background images.

    Original Form:
    Click image for larger version. 

Name:	ExtJS-Checkbox-Original-CSS.PNG 
Views:	189 
Size:	4.3 KB 
ID:	24816

    Form when printed:
    Click image for larger version. 

Name:	ExtJS-Checkbox-Before-CSS.PNG 
Views:	219 
Size:	13.2 KB 
ID:	24817

    My work around was to use the following print-media CSS:
            .x-form-checkbox {
                display: none;
            }
            .x-form-cb-checked .x-form-cb-label:before {
              content: '☑';
              font-size: 18px;
              line-height: 0.8;
            }
    
            
            .x-form-cb-label:before {
              content: '☐';
              font-size: 18px;
              line-height: 0.8;
            }
    With the CSS hack above the form now looked like this when printed:
    Click image for larger version. 

Name:	ExtJS-Checkbox-After-CSS.PNG 
Views:	195 
Size:	15.4 KB 
ID:	24818

    I'd say radioboxes would be able to modified in the same way.
  2. #2
    Hello!

    Thanks for your suggestion! I noticed this happens with most themes when trying to print using Internet Explorer. On Chrome -- at least by checking both "print preview" and comparing on both browsers -- I see the checkboxes.

    To test it I opened this exemple: Checkout Form, then opened it on a new tab, standalone. Switched the theme on the full Examples Explorer, then reloaded the standalone example page and then print preview. Triton theme shows the checkboxes on IE's print preview. But all themes shows checkboxes (and radio buttons as well) on Chrome. I'm assuming it will work on Edge, Firefox and Safari as well.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Indeed, it does look like it works if the whole page is printed. If you select a sub-section of the form and choose print selection, the checkboxes disappear (at least with the Gray theme). This also affects other libraries such as printThis (https://github.com/jasonday/printThis) which copy selected elements to an iframe and print from there. I'm guessing the resources don't come through in such circumstances.

Similar Threads

  1. [CLOSED] Printing from TreeGrid
    By Fahd in forum 4.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 03, 2017, 9:41 PM
  2. GridPanel printing bug with filter header
    By brunweb in forum 2.x Help
    Replies: 7
    Last Post: Sep 30, 2014, 2:25 PM
  3. Printing a Control...
    By Bubu in forum 2.x Help
    Replies: 0
    Last Post: Sep 06, 2012, 5:35 AM
  4. Printing a window
    By nuno_Santos in forum 1.x Help
    Replies: 0
    Last Post: Apr 17, 2009, 11:13 AM

Tags for this Thread

Posting Permissions