Skip to content
This repository has been archived by the owner on May 10, 2018. It is now read-only.

Background Undeflow #208

Open
JeffN825 opened this issue Sep 29, 2014 · 4 comments
Open

Background Undeflow #208

JeffN825 opened this issue Sep 29, 2014 · 4 comments

Comments

@JeffN825
Copy link

I have a carousel defined as follows:

<ul class="image carousel" rn-carousel rn-carousel-buffered rn-carousel-indicator>
    <li ng-repeat="photo in profile.photos"
        ng-style="{ backgroundSize: 'auto 300px', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundImage: 'url(' + photo.source + ')' }">
        <div class="layer"></div>
    </li>
</ul>

And the following classes defined

.carousel {
position: relative;
margin: auto;
background-color: #eeeeee;
border: 1px solid #ddd;
max-width: 1170px;
height: 300px;
}

.carousel img {
bottom: 0;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}

.carousel li {
overflow: hidden;
position: relative;
text-align: center;
}

On every slide except the first one, there is about 3px of "underflow", meaning the current slide takes up about n - 3px of the visible panel size...and on the right edge you can see 3px of the next slide. Any advice on how to resolve this?

I'm using PhoneGap with Ripple emulator and Ionic Framework, if that makes a difference.

Thanks.

@revolunet
Copy link
Owner

strange, this looks like a css issue. in the current version, the carousel detects the container width on initialisation. looks like the detected width is not the real one. can you try to log something here : https://github.com/revolunet/angular-carousel/blob/master/src/directives/rn-carousel.js#L178 and inspect in your browser to see if there's a difference ? If so you have to find which css rule it comes from.

@JeffN825
Copy link
Author

There isn't a different with the version you provided. Interestingly, the width seems correctly fixed at 278px...the problem seems to be with the slider. The first slid is fitted perfectly. The second slide is about 2px too far to the left. The third slide is about 4px too far to the left.

When I say too far to the left, I mean that px on the left are getting cut off and I'm seeing those px on the right side from the next slide.

Each slide gets a tiny bit more offset.

@revolunet
Copy link
Owner

could be cool if you can try if you get the same behaviour with the new version

@revolunet
Copy link
Owner

bump.
if you have a plunker with the reproduced problem i can look at it

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants