Printing Issue

[anubis76Participant]

Hi,

I was not sure where to post this so I’ll post here for now.

I have a large application form that is divided into 10 tabs. When I need to print the entire form, I managed to display all the data in each tab and print the entire form. However, one tab is giving me an issue with printing.

This tab has a 2-Column Panel. On the left is my Tree View. When each node on the Tree is clicked, a different set of Form components display on the right side of the Panel. However, this tab alone cannot print the entire set of components but crops it at the bottom.

I have a few screenshots but not sure where to post them.

In my CSS, I added the @media query as follows:

#splitter
            {
                display: block !important;
            }
            
            #ContentPanel.div
            {
                display: block !important;
                overflow: visible;
                height: 100% !important;
            }
            
            #ContentPanel div
            {
                display: block !important;
                overflow: visible;
            }
        
            #jqxtabs
            {
                overflow: visible;
            }
        
            .jqx-tabs-content
            {
                height: auto !important;
                overflow: visible;
            }
        
            .jqx-tabs-content-element
            {
                display: block !important;
            }
            
            .jqx-widget, .jqx-tree, jqx-tree-dropdown-root, jqx-tree-dropdown, jqx-tree-item-li, jqx-tree-item, jqx-item 
            {
                display: block !important;
                overflow: visible;
            }

All of the other components print just fine. Only have a problem with expanding all the nodes of the Tree and Printing the contents of each of them.

Thanks in Advance,
AJ

[DimitarParticipant]

Hi AJ,

You will have to call the tree’s expandAll method programmatically before printing. This means your printing configuration cannot be achieved with media queries only.

As for images, you can upload them to an image hosting website and share the links with us.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[anubis76Participant]

Hi Dimitar,

Thanks for the reply. Have posted the screen shots:

Screen 1

Screen 2

As you can see, even with expanding all the TreeNodes, the actual content that is supposed to display on the right gets cropped.

Warmest,
AJ

[DimitarParticipant]

Hi AJ,

So the actual issue is printing the information corresponding to all tree nodes? If so, you may apply overflow: visible in the media query to both the splitter and its right panel. This would result in something like this: http://jsfiddle.net/Dimitar_jQWidgets/Lfows4t5/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts