Slider Does not initialize correctly if it hidden

[danielehrhardt]

Ionic version: (check one with "x") [ ] 1.x [ X] 2.x

I'm submitting a ... (check one with "x") [ X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

if i create a new <ion-slides pager="true"> and add a hidden to the slider the slider does not initialize correctly. The slider does not slide back to the center position and the bullets are missing.

Expected behavior:

without the hidden all is working fine the slider scrolls back to the center and the bullets are visible

Steps to reproduce: http://plnkr.co/edit/fu3ptahTP0YoQMwrlEGD?p=preview

Related code:

Ionic 2 without RC

[mhartington]

This makes sense really. Since the sliders size is calculated by it's initial layout, dynamic hide/show can affect that. You should be calling update when the visibility is changed.

http://plnkr.co/edit/tP0U32unaVKx0WD3WclT?p=preview

It's not documented right now, but I'll add the docs for it.

[joshgarwood]

Fwiw, this was working before rc5 though :/

[mhartington]

yes, and in rc5 we refactored slides quite a bit.

[danielehrhardt]

Thank You @mhartington the new Slider is Amazing!!

[joshgarwood]

This still does not seem to work unfortunately. For instance, the slidesOffsetBefore property seems to be ignored.... :/

<ion-slides #deedSlider class="content-slider" slidesPerView="auto" spaceBetween="16">
    <ion-slide *ngFor="let deed of deeds" (click)="gotoDeed(deed)">
        <div>Cool content</div>
    </ion-slide>
</ion-slides>

ngOnInit() {        
    this.deedSlider.slidesOffsetBefore = 16;

    // Code to load deeds

    // Even after calling this, the slidesOffsetBefore property seems to be ignored.  (My slides are completely left aligned.  However, if I scroll manually I can see the offset is correctly established.).  Not sure how this got broken in the refactor, but any insight would be much appreciated... Perhaps I'm just missing something obvious?
   this.deedSlider.update();
}

[ItsJoeTurner]

I'm finding that a lot of fields for me are being ignored. Normally, using Swiper outside of Ionic I can pass through decimals for slidesPerView, but not inside Ionic. I need to have 1.2 slides showing per view but don't want to rely on width hacks in CSS to achieve this.

[erperejildo]

Trying update() but not working for me @mhartington. Inspecting this.slides there is no update() method

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.