jQuery – Fancybox: Aber ich will keine Bildlaufleisten!

Ich verwende jQuery Fancybox für ein Popup-Registrierungsformular hier

Ich möchte, dass das Formular eine Größe von 450 x 700 Pixel hat, aber egal, wie ich die Höhe und Breite einstelle, ich bekomme Bildlaufleisten:

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : '450',
            'height'  : '700',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

Irgendwas muss ich falsch machen aber ich komme nicht drauf was es ist. Ich würde mich hier über eine hilfreiche Hand freuen. Vielen Dank.

Ich hatte das gleiche Problem mit Fancybox und einem Iframe, habe nach einer Lösung gegoogelt und bin hier gelandet. Der Überlauf: versteckt hat bei mir nicht funktioniert, aber ich habe herausgefunden, dass man in Fancybox die Option für das Iframe-Scrollen festlegen kann (entspricht dem Setzen des Attributs „scrolling=no“ auf dem iframe), was das Problem in IE7 in einem mehr behebt anmutige Art:

$.fancybox({
    'type'        : 'iframe',
    'scrolling'   : 'no',
... and the rest of the parameters.

Klingt etwas seltsam. Eine hässliche Lösung ist die Verwendung von CSS, overflow:hidden;

Immer wenn ich fancybox verwende, funktionieren die Bildlaufleisten korrekt. Sicher, dass der Inhalt der Fancybox keine andere Höhe einstellt?

Bearbeiten: Ihre Beispielseite angesehen. Anscheinend wird im Inhalt eine Breite eingestellt, die größer ist als die Fancybox selbst.

Ich habe ziemlich damit gekämpft, nur um die Antwort in der Fancybox-Dokumentation zu finden.

Wie oben angedeutet, dachte ich zuerst, es wäre so einfach gewesen, das Scrollen zu deaktivieren:

$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})

Es reichte jedoch nicht aus, nur die Option „Scrollen“ auf „Nein“ zu setzen. Ich musste dasselbe in der Option „iframe“ wiederholen, etwa so:

$('.fancybox').fancybox({
  'type': 'iframe', 
  'scrolling': 'no', 
  'width': 500, 
  'iframe': {'scrolling': 'no'}
})

Ich wollte nur sagen, dass die obige Antwort von Magnus es für mich getan hat, aber für das zweite “Overlay” muss das “Overflow” sein.

helpers : {
  overlay : {
    css : { 'overflow' : 'hidden' }
  }
}

nachdem Sie alle oben genannten Tipps getestet haben (und immer noch nutzlose Bildlaufleisten haben, die durch einige Inline overflow: scroll bei .fancybox-inner) und auch viele andere eigene Problemumgehungen ausprobiert habe, habe ich die Bildlaufleisten mit dieser Lösung losgeworden:

    afterShow: function(){
        this.inner.css({
            overflow: 'auto' // or 'no'
        });
    }

Ich habe das gleiche Problem und nach Zeiten von Versuch und Irrtum fand ich heraus, dass Sie Bildlaufleisten vermeiden können, indem Sie die Frame-CSS-Klasse überschreiben.

Sie können Folgendes tun:

iframe.fancybox-iframe {
    overflow:hidden;
}

JS-Konfiguration:

jQuery(document).ready(function(){
    $("a.various").fancybox({
        'width'             : 'auto',
        'height'            : 'auto',
        'autoScale'         : false,
        'autoDimensions'    : false,
        'scrolling'         : 'no',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'  
    }); 
});

Hinweis: Ihr Fancybox-Boxtyp muss an sein iframe damit dies wirksam wird.

Ich hatte ein ähnliches Problem, bei dem vertikale Bildlaufleisten angezeigt wurden, wenn ich in den Fancybox-Optionen eine maxWidth festlegte.

Um das Problem zu umgehen musste ich einstellen

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

und legen Sie eine CSS-Regel mit fester Breite für den Fancybox-Inhalt fest, anstatt eine maxWidth in den Fancybox-Optionen anzugeben. Wenn ich Letzteres tat, war die berechnete Höhe von Fancybox für den Inhalt etwas zu klein – was wahrscheinlich darauf hindeutet, warum es überhaupt Bildlaufleisten eingefügt hat.