0

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!

Mikko Viitala
  • 8,344
  • 4
  • 37
  • 62
Jyina
  • 2,530
  • 9
  • 42
  • 80
  • 3
    Just see this http://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page – user666 Aug 18 '16 at 16:07

1 Answers1

1

.hidden-print

See Bootstrap 3 Documentation on Responsive Utilities, Print

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

Robert
  • 6,881
  • 1
  • 21
  • 26