Why is GAM making ad block stretch out when there's no ad?

[csdude55]

I'm using Google Ad Manager to fill ad slots, but I'm having an issue with one ad unit. If there's no ad available, it still stretches the container DIV out! And just leaves a big empty spot.

This wouldn't be tragic except that I measure the height after the document is complete, and if it's empty then I throw in an alternative. With it stretched out, though, I can't do that.

Here's my code, do you see any reason for it to be stretched out?

<style>
#block_3 {
 position: sticky !important;
 top: 0
}

.med_rect {
 width: 300px;
 max-height: 250px;
 padding: 10px;
 margin-bottom: 10px;
 border: 1px solid #E3E3E3;
 background: #F5F7F9;
}

<div id="block_2" class="med_rect"
 style="margin: 10px 0 20px 0; height: auto">
  <script>
  // tableWidth is set earlier, and shouldn't be relevant to this
  if (tableWidth >= 975)
   googletag.cmd.push(function() { googletag.display('block_2'); });
  </script>
  <div id="backup_2"></div>
</div>

<div id="block_3" class="med_rect"
 style="height: auto; max-height: none !important; margin-bottom: 20px">
  <script>
  if (tableWidth >= 975)
   googletag.cmd.push(function() { googletag.display('block_3'); });
  </script>
  <div id="backup_3"></div>
</div>

You can see that they're pretty much identical, but block_3 includes "max-height: none !important".

I don't think this should matter, but in GAM block_2 is [300, 250] while block_3 is [300, 600]. And they're both defined under the same googletag.cmd.push(function() { ... }) (in a loop), so there shouldn't be any different settings.

[csdude55]

I discovered that the fault is with the Google ad; it plugs in an iFrame, and that iFrame has a height set of 600px. Even when it's not filled :-/

Using googletag.pubads().collapseEmptyDivs(); is no good, it hides the parent container altogether but still has a height of 600px. So my test to show a backup still fails.

I'm super frustrated, I've been working on this for 2 weeks and it's still not right. It shouldn't be this hard!

[not2easy]

It looks like #block_3 belongs only in a sidebar? I'd try to keep it out of use within the main content area.

[csdude55]

That's correct, @not2easy, it's in the sidebar.

For whatever reason, it looks like Google inserts a child DIV, and then an IFRAME inside of that DIV. So when I inspect the element it looks like:

<div id="block_3" class="med_rect"
 style="height: auto; max-height: none !important; margin-bottom: 20px">
 <script>
 if (tableWidth >= 975)
  googletag.cmd.push(function() { googletag.display('block_3'); });
 </script>
 <div id="something_from_google">
  <iframe id="something_else_from_google"></iframe>
 </div>
 <div id="backup_3"></div>
</div>

I've gone down a complicated path on this one, and I'm not sure if what I've landed on is the best way. This is a shortened version of my real code so please forgive any typos:

var gFrame;

if (i = document.getElementById('block_3')) {
 for (m in i.childNodes)
  if (gFrame = i.childNodes[m].id)
   break;

 if (gFrame &&
  (
   document.getElementById(gFrame).clientHeight < 50||
   document.getElementById(gFrame).innerHTML == ''
  )
 )
) {
 // do stuff
}

I might have to expand that, though, and instead of breaking when I find the first element with an ID I might need to break when I find the first gFrame.nodeName === 'IFRAME' && gFrame.id. Then if nothing is found, a second loop that breaks when it finds the ID.

[nickZ]

Can't you fill the empty slot with an Extra add from someone else?
Some indigenous shop/site would love to get a slot on a well visited site.

[csdude55]

People keep SAYING that I can do that, but I have yet to figure out the magic trick. That endeavor is what led me down this particular rabbit hole, trying to figure out a way to show a backup when Google doesn't have anything.

If you know how I can do that, believe me, I'm all ears! LOL