0

I am trying to print the contents of a modal but its showing big gaps in the print preview and things that should be hidden.

Despite adding hidden to particular things they still show up in the preview.

There is also a hidden div to prevent swiping on the map when scrolling which is why i thing th first page of the preview looks blank.

@media print {
  #overlay, #close-modal-button, #print-button * {
    visibility: hidden;
    display: none !important;
  }
  #map-modal * {
    visibility: visible;
  }
  #map-modal, #map-modal {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: visible!important;
    display: block;
  }
}

<div id="map-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: true}]" [materializeActions]="modalActions">
  <div id="map-modal-content" class="modal-content">
    <h4 id="modal-title">Map of the area and directions</h4>
    <div class="container center">
      <div class="row">
        <div id="overlay" class="overlay" onClick="style.pointerEvents='none'">
        </div>
          <div class="center">
            <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1T1AFckKqP4J38fIJswg8uEr42hyB3R5y&ll=51.06791175093598%2C0.21307320000005348&z=11" allowfullscreen></iframe>
          </div>
      </div>
      <hr>
      <p id="modal-text"><b>St Dunstan’s Church, Mayfield TN20 6AB</b><br>Mayfield village is signposted on the A267 and the church is situated in the middle of the village on the High Street.</p>
      <div class="row">
        <div class="container center">
          <div class="col s12">
            <img id="map-image" class="center materialboxed" src="./assets/Map1.png">
          </div>
        </div>
      </div>
      <p id="modal-text">The car park is sign posted on the right-hand side of the High Street as you are driving up the hill. The easiest way to get to the church from the car park is to walk through the car park for The Middle House as seen on the map. The marked car park in Mayfield is free.</p>
      <hr>
      <p id="modal-text">The drive from St Dunstan’s Church to the reception at Juddwood Farm is approximately 30 minutes.</p>
      <p id="modal-text"><b>Juddwood Farm, Haysden Lane, Tonbridge TN11 8AB </b></p>
      <div class="row">
        <div class="overlay" onClick="style.pointerEvents='none'">
        </div>
          <iframe id="map" class="center" src="https://www.google.com/maps/d/u/0/embed?mid=1uReFxtB4ZhFSwVtD8vQ7L3qKpetdMElh&ll=51.096412867708054%2C0.240690000000086&z=11" allowfullscreen></iframe>
      </div>
      <div class="row">
        <div class="container center">
          <div class="col s12">
          <img id="map-image" class="materialboxed" src="./assets/Map2.png">
        </div>
      </div>
    </div>
    </div>
  </div>
  <div class="row">
    <div class="container center">
      <a id="print-button" onClick="window.print()" class="black waves-effect waves-light btn z-depth-3" href=""><i class="material-icons right">print</i>Print this page</a>
    </div>
  </div>
  <div class="modal-footer transparent">
    <a id="close-modal-button" class="right transparent btn-flat" (click)="closeModal()">Close</a>
  </div>
</div>

I've googled around a fair amount but cant see why. Here is a gif of the print preview https://i.stack.imgur.com/OHjfU.jpg

Wrumble
  • 231
  • 1
  • 5
  • 15
  • When I've used CSS `visibility: hidden;` in the past, I've also had to include `height: 0;` as well. I don't know if that solves the problem for you as `display: none` should do exactly that – Shaun Bebbers Jan 21 '18 at 14:15
  • I added it and tested but get the same results – Wrumble Jan 21 '18 at 14:32
  • Thanks for your idea but it's still not working. I think the modal background or something is still being added to the print preview. https://scottandviki.co.uk at the bottom of the maps card/modal – Wrumble Jan 21 '18 at 18:12
  • If the modal data is still printing, I would try removing the modal HTML mark-up that should be hidden with jQuery or something like this. May be look at this question -> https://stackoverflow.com/questions/24955015/how-to-override-standard-browser-print-and-print-an-iframe-by-default – Shaun Bebbers Jan 22 '18 at 08:58

1 Answers1

0

It looks like your declaration #print-button * is looking for a child of #print-button, rather than #print-button itself.

Also, it's unclear why you have duplicated #map-modal, #map-modal { ... Did you intend to select #map-text ?

Bill Kremer
  • 116
  • 2
  • 5