unable to get iframe to maximise all the available space

[mosesliao]

I am using this script on my webapp

<script type='text/javascript'>
  $(document).ready(function() {
    $(".map").colorbox({width: '90%', height: '80%', iframe: 'true', maxWidth: '100%'});
  });
</script>

but unfortunately I get this. the map is too small on the top left hand corner.

how should I fine tuned my javascript so that the map can show properly?

[jackmoore]

Does the same thing happen if you set the transition to "none"?

<script type='text/javascript'>
  $(document).ready(function() {
    $(".map").colorbox({width: '90%', height: '80%', iframe: 'true', maxWidth: '100%', transition: "none"});
  });
</script>

[rtyler]

@jackmoore For what it's worth, I believe I have the same issue as @liaogz82, and yes it still happens with transition: 'none'

[rtyler]

One workaround I have found is to forcibly set width and heights on the iframe, since it doesn't appear to have them otherwise set.

E.g.

    $(document).bind('cbox_complete', function() {
      	// https://github.com/jackmoore/colorbox/issues/859
        $('.cboxIframe').attr('width', '100%').attr('height', '95%')
    });

[AntaeusNar]

I was having a similar issue, and then realized I had not loaded colorbox.css. Correcting that fixed the issue.