Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ion-slides (Swiper) autoHeight option doesn't adjust the container height to active slide #15079

Closed
tru03 opened this issue Aug 7, 2018 · 4 comments · Fixed by #17208
Closed
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@tru03
Copy link

tru03 commented Aug 7, 2018

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[x] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:

If you use the ion-slides component with autoHeight option set to true, it doesn't adjust the ion-slides height to the active slide's content height as it supposed to.

Expected behavior:

The container should adjust to the content height of the active slide: http://idangero.us/swiper/demos/390-autoheight.html

Related code:

<ion-slides [options]="{autoHeight: true}">
    <ion-slide>
        <div style="width: 100%; height: 300px; background: red;"></div>
    </ion-slide>
    <ion-slide>
        <div style="width: 100%; height: 300px; background: blue;"></div>
    </ion-slide>
    <ion-slide>3</ion-slide>
</ion-slides>

Other information:

The ion-slide element (and .swiper-slide class) having a height of auto instead of 100% seems to fix the issue.

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
    height: auto;
}

This style definition which should provide the desired effect is not getting through the shadow DOM of this implementation.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

   ionic (Ionic CLI)          : 4.0.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.1
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1
@ionitron-bot ionitron-bot bot added the triage label Aug 7, 2018
@Ionitron Ionitron added the ionitron: v3 moves the issue to the ionic-v3 repository label Nov 29, 2018
@ionitron-bot
Copy link

ionitron-bot bot commented Nov 29, 2018

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

@ionitron-bot
Copy link

ionitron-bot bot commented Nov 29, 2018

Issue moved to: ionic-team/ionic-v3#661

@ionitron-bot ionitron-bot bot closed this as completed Nov 29, 2018
@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Nov 29, 2018
@ionitron-bot ionitron-bot bot removed the triage label Nov 29, 2018
@ionic-team ionic-team unlocked this conversation Dec 12, 2018
@mhartington mhartington reopened this Dec 12, 2018
@paulstelzer paulstelzer added package: core @ionic/core package type: bug a confirmed bug report and removed ionitron: v3 moves the issue to the ionic-v3 repository labels Dec 13, 2018
@daem0ndev
Copy link
Contributor

daem0ndev commented Dec 15, 2018

The PR #16712 is ready to go and now exposes the Swiper instance's updateAutoHeight() method to allow for programmatically forcing the swiper container to update the height for the active slide when using the autoHeight = true option with your ion-slides.

@ionitron-bot
Copy link

ionitron-bot bot commented Feb 21, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Feb 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants