search

jackmoore / colorbox

A light-weight, customizable lightbox plugin for jQuery
http://www.jacklmoore.com/colorbox/
MIT License
4.75k stars 1.14k forks source link

unable to get iframe to maximise all the available space #859

Open mosesliao opened 6 years ago

mosesliao commented 6 years ago

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.

may-26-2018 15-32-20

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

jackmoore commented 6 years ago

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 commented 5 years ago

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

rtyler commented 5 years ago

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 commented 5 years ago

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