Grails bootstrap hidden-print not working as expected

Question

So, In our grails project we are using the twitter-bootstrap:3.1.1 plugin. Have not seen any major problems until now.

In our layouts/main.gsp we have added a nice nav bar to be there everywhere. The only problem is we don't want it to print when our pages are printed. In 2.3.2 in more than one case we would just add the class to hide the element. As you can see below the hidden-print is added to the outside element. When printed the page still includes the items marked to be hidden.

As a test, I decided I would put it on other random elements within the application and in all points it seems to ignore the no print request.

<div class="navbar navbar-default hidden-print" role="navigation">
  <div class="navbar-header">
    <g:link class="navbar-brand" uri="/">Eight States</g:link>
  </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><g:link controller="agency" action="index">Agency</g:link></li>
        <li><g:link controller="attendee" action="index">Attendee</g:link></li>
        <li><g:link controller="vendor" action="index">Vendor</g:link></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><g:link controller="activityRegistration">Event Report</g:link></li>
            <li><g:link controller="attendee" action="flightReport">Flight Report</g:link></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
        <li>
        <sec:ifLoggedIn><a href="${createLink(uri: '/j_spring_security_logout')}">Logout</a></sec:ifLoggedIn>
        <sec:ifNotLoggedIn><g:link controller='login' action='auth'>Login</g:link></sec:ifNotLoggedIn>
        </li>
      </ul>
    </div>
  </div>

Answer 1

The issue is that the CSS isn't being included when the media type is print.

<link href="/SomeProject/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="screen, projection">

That only includes the CSS for screen and projection.

Regarding your comment: I'm very sure that if the media attribute on the link element doesn't include print then the CSS won't be parsed when printing.

Thus the media query within the CSS never gets a chance to run at all. If you look at the getbootstrap.com site you will see it doesn't include a media specification on the style sheet and thus is processed for all media types (including print).