Hide Floating panel in print window

Question

I'm developing a floating panel that has to be hidden completely on the print screen. I use JSPanel3. I would like the whole panel to be hidden only during the display of the print screen.

Code HTML

<div style="position: absolute; top: 30px; left: 20px" id="indxPopup">
    <div class="noPrint" id="hcontent" style="padding-right: 10px; padding-top: 10px">
        <one-gedfile-form layout="gedfile.TEMATICA.LAYOUT" mode="mode" gedfile-form-control="formControl" show-form-border="false"></one-gedfile-form>
    </div>
    <div floating-panel ctrl="closePanelForm" id="jsPanel" minimize="remove" close="remove" maximize="remove" parent-tag="indxPopup" html-tag="hcontent"></div>
</div>

Created directive

oneApp.directive('floatingPanel', function () {
   return {
       restrict: 'A',
       scope: {
        id:'@',
        parentTag: '@',
        title: '@',
        content: '@',
        close: '@',
        maximize: '@',
        htmlTag:'@',
        minimize: '@',
        ctrl: "=",
    },
    controller: ['$scope', function($scope) {
        var config =
        {
            id: $scope.id,
            headerTitle: $scope.title == undefined ? '' : $scope.title,
            position: "center",
            size: { width: 350, height: 250 },
            content: $scope.htmlTag == undefined ? $scope.content : $('#'+ $scope.htmlTag),
            theme: 'rgb(192, 192, 192)',
            headerControls: {
                close: $scope.close,
                maximize: $scope.maximize,
                minimize: $scope.minimize
            },
        };

        var size, position;

        if ($scope.parentTag != undefined) {
            var element = $('#' + $scope.parentTag);
            var pos = element.offset();
            config.size = { width: element.width(), height: element.height() };
            config.position = { top: pos.top, left: pos.left }

        }

        var panel1 = $.jsPanel({

            config
        });

        var closePanel = function() {

            panel1.close();
        }

        var onCreate = function() {

            if ($scope.ctrl) {

                $scope.ctrl.closePanel = closePanel;
            }
        };

        onCreate()
    }],
};
})

Result

Edit

I added the code

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

and now it only appears the border of the header

score 1 · Answer 1 · answered Jun 20 '18 at 19:41

1

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

answered Jun 20 '18 at 19:41

Daniel

91
3

I added the code and now it is displaying parts of the header. I added header = false to the directive and it still did not work. – Rafael Barbosa Jun 22 '18 at 16:46
@media print { #indxPopup{display: none !important;} } – Daniel Jun 23 '18 at 19:59
To solve I used the jsPanel ID in place of the content id and everything worked normally. @media print { #jsPanel{display: none !important;} }. Thanks! – Rafael Barbosa Jul 16 '18 at 16:51

Hide Floating panel in print window

1 Answers1