Jyina Jyina - 3 months ago 34
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>
</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!

Answer

.hidden-print

See Bootstrap 3 Documentation on Responsive Utilities, Print

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