2

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>
buzzsawddog
  • 662
  • 11
  • 32
  • As a note... I initially had the outer set up as a `nav` as shown on the the bootstrap help but it did not seem to help. – buzzsawddog Apr 21 '14 at 19:44
  • Is it possible that the bootstrap css isn't being included for the print media type? See this: http://stackoverflow.com/questions/12302819/how-to-create-a-printable-twitter-bootstrap-page – Joshua Moore Apr 21 '14 at 19:47
  • @JoshuaMoore Interesting find `` is how its being included in the project. – buzzsawddog Apr 21 '14 at 19:51
  • But should `@media print { .hidden-print { display: none !important; } }` tell it to print properly? Thats how its included in the document... No css expert but I dont think there should be a print on that? – buzzsawddog Apr 21 '14 at 19:52
  • `` with the class `hidden-print` on navbar should work. – dmahapatro Apr 21 '14 at 20:58

1 Answers1

8

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).

Joshua Moore
  • 24,706
  • 6
  • 50
  • 73
  • 1
    I guess I will try to figure out a way to do a bug report on the plugin... Turns out that it DOES need to have the `print` added. You are a life saver and thanks for what you do :-) – buzzsawddog Apr 21 '14 at 20:04
  • No worries. Very glad to help when I can. – Joshua Moore Apr 21 '14 at 20:58
  • I love that guy. I was dealing with the exact same issue .. and not even after reading your full answer, i got it. (the media scope) ;) – Milche Patern Jun 10 '14 at 20:08