CODEWITHSUNDEEP
css
Jyina
Jyina

Reputation: 2892

How to hide Print button in the print out using @media?

I have a bootstrap column with a button for print which uses media attribute.

<div class="panel-footer">
                    <div class="row">
                        <div class="col-md-offset-5 col-md-2">
                            <button class="btn btn-primary btn-wordwrap" ng-click="$print()" media="print"><span class="glyphicon glyphicon-print"></span> Print</button>
                        </div>
                    </div>
                </div>

The @media is defined in css as below.

@media print {
    button {
        display: none !important;
    }
}

The $Print() is defined as below in angular controller.

 $scope.$print = function () {
            window.print();
        };

It still prints the Print button in the print out. Any ideas what I am missing here? Thank you!

Upvotes: 0

Views: 1284

Answers (1)

Robert
Robert

Reputation: 6967

.hidden-print

See Bootstrap 3 Documentation on Responsive Utilities, Print

http://getbootstrap.com/css/#responsive-utilities-print

Upvotes: 1

Related Questions