CODEWITHSUNDEEP
jqueryhtmlfancyboxfancybox-2
user2143903
user2143903

Reputation: 23

No scrollbar in fancybox2, and set size

I've been trying to get the scrollbar to not show up in fancybox. I've tried out the solution at Fancybox inline to have no scrollbars and be 100% and 'fixed' but I can't get it to work.

The one I'm working at is http://home.nith.no/~setkin11/advancedsearc1.html I want the size to be set to a constant and the scrollbar to not show at all when it pops up.

Script

 $(document).ready(function() {
        $('#smallAdvanced_container').bind('click', function(){
            var container = $('#advanced_container');
            if($('#advanced_container').is(':hidden')) {
                $('#advanced_container').show();
                $.fancybox.open([container]);
            }
            else {
                $('#advanced_container').hide();
                $.fancybox.open([container]);    
            }
        });
        //$('#advanced_container').fancybox();
    });

    $('#advanced_container').fancybox({
         type: 'html', 
         width: 410, 
         height: 620,
         autoSize : false, 
         autoCenter: false, 
         fitToView : false,  
         scrolling : 'no' 
    });

HTML

<div id="smallAdvanced_container">
    <img src="ribbon.png" alt="Search ribbon">
</div>

Upvotes: 2

Views: 1838

Answers (2)

Chris
Chris

Reputation: 3298

As per Jame's answer, but if you set overflow: auto !important instead you will get scrollbars when you need them and not when you don't. i.e.:

.fancybox-inner {
  overflow: auto !important;
}

You can also limit this to just a particular type of fancybox you might be displaying by using a specific css parent selector, e.g. to only affect a fancybox displaying iFrame content, use:

.fancybox-type-iframe .fancybox-inner {
    overflow: auto !important;
}

Upvotes: 2

James King
James King

Reputation: 1917

It looks to me as though you are using the API correctly, i'm not sure you can do it without changing the plugin code.

I know a CSS way around, but it has to use !important, which is a bit of a hack. Just include the following in your CSS

.fancybox-inner {
  overflow: hidden !important;
}

Upvotes: 1

Related Questions