Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

owl-items disappear [ removed from dom ] on window size change

See original GitHub issue

I was facing this issue only in one of my owl carousels, every time I changed the window size the owl-items get removed.

<ng-template carouselSlide [id]="index">

when I removed the [id] they stooped disappearing, also when I removed responsive option the bug didn’t happen again.

Although there were no errors on my console.

Issue Analytics

State:
Created 5 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

vitalii-andriiovskyicommented, Dec 19, 2018

Thanks for reporting the issue with SSR. The problem is solved in new version v1.0.5. Install it and SSR should work correctly.

1reaction

vitalii-andriiovskyicommented, Dec 19, 2018

You can solve by this way:

<div class="your-div">
 <ng-container *ngIf="display =='none' ? false : true">
   <owl-carousel-o [options]="customOptions">
     ...
   </owl-carousel-o>
 </ng-container>
</div>

display must be the prop of .ts file.

However, this solution will rerender carousel any time after css-prop display of <div> will change from none to block.

Also carousel can be rerendered after change of length of the array containing data for slides. At the begining you can define this array as empty array and when display from none becomes block for the first time, you populate the array with data and carousel gets rendered correctly.