jQWidgets Forums

Tagged: @media, css, jqxTabs, media query, Print, tab, Tabs

This topic contains 4 replies, has 2 voices, and was last updated by anubis76 9 years, 12 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Printing all Tabs Posts

March 21, 2015 at 6:29 am Printing all Tabs #68927

Participant

Hi Team,

I have a quick question regarding Printing a page using jqxTab. When I print, I can only see the active tab, and also it is limited to the height I set to the jqxTab that I set when creating. How do I set this to print all the tabs when user clicks print?

I tried creating a @media print query in my css like this:

I did not know which particular class to choose, so I tried with each of the classes defined in the css…..but in my Print Preview it only shows the Active Tab…

@media print
        {
            .print, .jqx-widget, .jqx-tabs
            {
                display:inline;
                width: 100%;
                height: 100%;
                
            }
            
            .jqx-widget-content 
            { 
                display: block; 
                width:100%; 
                height:100%;
                
            }
            
            .jqx-tabs-collapsed 
            { 
                display: block; 
                width:100%; 
                height:100%;
                
            }
            
            .jqx-fill-state-disabled 
            { 
                display: block; 
                width:100%; 
                height:100%;
                
            }
            
            .jqx-widget-header 
            { 
                display:none;
            
            }
            
            .noprint
            {
                display:none;
            }
        }

Would appreciate any insight into this.

Warmest,
AJ

March 21, 2015 at 9:52 am Printing all Tabs #68937

Dimitar

Participant

Hello AJ,

While not a perfect solution, this may be helpful to you:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Tabs Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
        @media print {
            #print {
                display: none;
            }

            .jqx-tabs-content {
                height: auto !important;
            }

            .jqx-tabs-content-element {
                display: block !important;
            }
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxtabs').jqxTabs({ width: 550, height: 150 });

            $('#print').click(function () {
                window.print();
            });
        });
    </script>
</head>
<body class='default'>
    <button id="print">Print</button>
    <br />
    <br />
    <div id='jqxtabs'>
        <ul style='margin-left: 20px;'>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
        </ul>
        <div>
            Content 1
        </div>
        <div>
            Content 2
        </div>
        <div>
            Content 3
        </div>
        <div>
            Content 4
        </div>
        <div>
            Content 5
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 23, 2015 at 8:16 am Printing all Tabs #68970

anubis76

Participant

Hi Dimitar,

Thanks for your reply. I’m afraid it still does not work. It only prints the visible portion of only the first tab.
Is there anything else I can try?

Warmest,
AJ

March 23, 2015 at 10:34 am Printing all Tabs #68985

Dimitar

Participant

Hi AJ,

Here is a small modification to the media query that should fix this:

<style type="text/css">
    @media print
    {
        #print
        {
            display: none;
        }
        
        #jqxtabs
        {
            overflow: visible;
        }
        
        .jqx-tabs-content
        {
            height: auto !important;
            overflow: visible;
        }
        
        .jqx-tabs-content-element
        {
            display: block !important;
        }
    }
</style>

Best Regards,
Dimitar

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

March 23, 2015 at 11:21 am Printing all Tabs #68992

anubis76

Participant

Thanks Dimitar!

It worked!

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.