Scrollbar issue with full height full width slider

larsscho's Avatar

larsscho

05 Oct, 2012 07:45 PM

When I resize the Browser, theres all of a sudden some kind of margin at the right side and at the bottom, when i refresh the page it is fullscreen again. I attached an image, so that you can see what I mean.
Also here is a link: http://larsscho.de/rhythmmoves/index.html

My setup is:

HTML:

<div class="sliderContainer fullWidth">
<div id="full-width-slider" class="royalSlider heroSlider rsDefault">
  <div class="rsContent">
    <img class="rsImg" src="img/mann_trommel.jpg" alt="" />
        <div class="meinblock rsABlock rsNoDrag" data-fade-effect="" data-move-offset="2000" data-move-effect="bottom" data-speed="1000" data-delay="900">
        <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
    </div>
  </div>
  <div class="rsContent">
    <img class="rsImg" src="#" alt="" />
  </div>
 <div class="rsContent">
    <img class="rsImg" src="#" alt="" />    
 </div>
  <div class="rsContent">
    <img class="rsImg" src="#" alt="" />
    
  </div>
</div>
  </div>
<script id="addJS">jQuery(document).ready(function($) {
  $('#full-width-slider').royalSlider({
    arrowsNav: true,
    loop: true,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fill',
    arrowsNavAutoHide: true,
     autoScaleSlider: false,
     autoHeight: false,
    controlNavigation: 'none',
    thumbsFitInViewport: false,
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    slidesSpacing: 0,
    globalCaption: true
    });
    });
</script>`

CSS:

     `#full-width-slider {
 position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0; /* height of thumbs (if not required set to 0) */
    height: auto;
    width: auto;

}`
  1. Support Staff 1 Posted by Dmitry Semenov on 05 Oct, 2012 08:10 PM

    Dmitry Semenov's Avatar

    Hi,

    This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. http://stackoverflow.com/questions/242608/disable-browsers-vertical...

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • sliderproblem.jpg 77.8 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac