Printing modal still showing 'hidden' content - html

Question

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://imgur.com/a/Hnfcr

Answer 1

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 ?