Owlcarousel2: Gap issue on single item related to browser vertical scrollbar
Hi,
I notice that there is a gap on the right side of the item when using single item. I notice that the gap size is the same pixel as per the browser vertical scrollbar (about 17px width if chrome). This happen when the page content is short where the vertical scrollbar is not visible.
This gap issue appear when the page first time load. When I resize the browser window, the width of owl will fix it back to full width (gap disappeared). My problem is when the page first load, without the vertical scrollbar, you will notice the right side have gap.
Thanks.
claudchan
All 19 comments
Please improve your bug report: https://github.com/OwlFonk/OwlCarousel2#bug-reports. Thanks!
witrin
on 28 Aug 2014
Have the same problem! Any tipps to solve that?
KaiBroenstrup
on 21 Nov 2014
Hi,
I have no idea how to make this demo actually. Is very hard to make this demo to trigger the problem I had issued. JSFiddle have iframe, it will not trigger the problem I issue actually and I do not know how. Anyway, it may not noticeable.
Basically, in my case, I am using owl with full width and full height (like backstretch). It happen when I minimize the browser (not resize). I will notice the gap of scrollbar width on the right. See image:
Once I make the browser resize it will back to normal. I think this may not be owl issue. It is the native of the browser, perhaps? Or I should adjustment CSS on my side to overflow hidden instead.
It may not be a bug, or I should ignore it eventually.
claudchan
on 9 Dec 2014
Can someone please verify that this is still an issue?
joeyjoejoejr
on 13 Feb 2015
This was definitely still an issue for me using 2.0.0-beta.2.4.
The problem appears to occur because at the precise moment OwlCarousel calculates the viewport width, it will sometimes have a (vertical) scrollbar. This is due to the way the markup displays before the carousel script kicks in, all of the content from the various slides would come one after the other.
The user doesn't see a scrollbar, since the carousel quickly rearranges the slides horizontally, you're just left with a scrollbar sized gap on the right hand side. Quite a tricky case to spot! Resizing the window at any point causes the width to be recalculated correctly.
My temporary fix was to add a max-height and overflow:hidden; to the .owl-carousel element. This wouldn't work in all cases but perhaps the execution order/timing in JS could be altered to take this into account.
mike-source
on 5 Mar 2015
I have a similar bug. For me the width of the scrollbar is overlapping the owl carousel, making only 95% (ish) of the image visible. If I set a fixed with, for example 400px, on the carousel, everything looks alright. I really need some help getting this solved. Anyone?
coffeeneed
on 3 Feb 2016
For me it's strange;
I resize browser to "mobile" and then refresh page (with scroll). The image is then smaller on the right side than on the left and thus is overlapped by my white background.
If I add lots of dummy text in the bottom of the page making the page even taller, this bug disappears.
coffeeneed
on 3 Feb 2016
Thanks !
Jahangiruzzal
on 17 Feb 2016
@mike-source This has fixed my issue as well! Thanks for the solution. Very weird that this happens though.
nickmeagher
on 6 May 2016
I find solution for me.
Set for each slides fixed height, for example 300px. Than wrap your slider into div, and set fixed height for it too. For example, 300px. And set overflow: hidden for wrapper.
This steps removes horizontal scrollbar from window before slider will be initialized, and calculating of slides width be correct.
PS. Sorry for my english :)
brezitsky
on 5 May 2017
Ugly yet functional solution:
1º - Create a css class like this one;
.lock {
overflow: hidden;
}
2º - Add the class to the body:
<body class="lock">
</body>
3º - Just after you call the plugin put this jquery code:
$('body').removeClass('lock');
At least for me, no gap now, since the carousel was created when there was no vertical scrollbar;
anderson-isaac
on 27 Jun 2017
$('.owl-carousel').trigger('refresh.owl.carousel');
Add this after rending the owl carousel, ie $('.owl-carousel').owlCarousel({....})
hchawla-d
on 17 Sep 2017
Thank you
On Mon, Sep 18, 2017 at 2:17 AM, Harpreet Singh Chawla <
[email protected]> wrote:
$('.owl-carousel').trigger('refresh.owl.carousel');
Add this after rending the owl carousel, ie $('.owl-carousel').
owlCarousel({....})—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/OwlCarousel2/OwlCarousel2/issues/461#issuecomment-330080323,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ad0ZpkvzfjNcbhWTMn-Igf-E1V7TEGWWks5sjX5CgaJpZM4CcDHI
.
arificst
on 18 Sep 2017
Thank you hchawla-d for the cleanest way to do it
maximeDore
on 3 May 2018
@hchawla-d Superstar!
Le-future
on 10 Jul 2018
@hchawla-d Life-saver! Thank you
tetsuo808
on 1 Aug 2018
@hchawla-d Super clean solution. Nice one!
davidhyland
on 13 Sep 2018
//find "this.$element.width()" in owl.js and change code like this....
// set view width
$('body, html').css('overflow', 'hidden');
var buiste = this.$element.width();//$(window).width();
$('body, html').css('overflow', 'visible');
this._width =buiste; //this.$element.width();
zeetback
on 14 Sep 2018
i am late as hell..but i came into this problem...i have site with no vertical scroll and owl was reserving space for it...but single overflow: hidden; on body helped me
00michal
on 15 Apr 2020
Related issues
ghost
·
3Comments
shamimsaj
·
3Comments
Uranbold
·
3Comments
mkraha
·
4Comments
shofer4eto
·
4Comments
Most helpful comment
$('.owl-carousel').trigger('refresh.owl.carousel');
Add this after rending the owl carousel, ie $('.owl-carousel').owlCarousel({....})