Jyina Jyina - 1 year ago 80
CSS Question

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>

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 () {

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

Answer Source


See Bootstrap 3 Documentation on Responsive Utilities, Print