Dynamic slide height

I believe I am at 2.0.0, after RC6 there was no more upgrade instructions, it said enjoy!
I have to swipe on this dummy data in order to cause (ionSlideDidChange) to fire the event.

If I enable your AdjustHeight() code I get the following error

Cannot read property ‘children’ of undefined

let height = targetSlide['ele']['children'][0]['clientHeight'];

Right, the DOM changed a lot. “ele” has been replaced with “nativeElement”.

in a command prompt, type

ionic info

and paste that in here

ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.6
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.2.0
Xcode version: Not installed

You’re on RC6. Upgrade to 2.0.0 Final, then follow post #16. It works perfectly.

2.0.0 shows no steps at this link?


Also please what is post #16, I have become the dumbest programmer on the face of this planet :slight_smile:

post 16

:slight_smile:

So are there upgrade steps to go from RC6 to 2.0.0? I can’t see them in snapshot above.

I believe I am doing all what you specified in post 16, I have enabled autoHeight = true, ngAfterViewInit() is getting fired, I can’t see that in the console.

@ViewChild('mySlider') slider: Slides;
 ngAfterViewInit() {
        console.log("Slider------------>>Input Props Set");
        // http://ionicframework.com/docs/v2/api/components/slides/Slides/
        // http://idangero.us/swiper/api/#.V6zJbPmU3RY for API, options, ...
        // 20160801 created
        // 20170202 breaking change -> changed to props at RC6
        this.slider.initialSlide = 0;
        this.slider.loop = false;
        this.slider.pager = true;
        this.slider.speed = 500;
        this.slider.centeredSlides = true;
        this.slider.autoHeight = true;
        // this.slider.observer = true ; // not available
        // autoplay = 1000
        // effect = "cube"
    }

However, I do not get any auto sizing of the images.


Thank you.

I never upgrade. It takes only a few minutes to create a new app and drop in your existing code.

With all respects, I think that’s totally crazy :slight_smile: the ionic team might as well support my src/ and other configs and folders side-by-side, if “drop in your existing code” means replace the blank app with my src code. Blowing 30,000 files and creating news one is getting on my nerves :), while we keep creating hello programs I see no productivity.

Anyways, I did what you said Boss.
ionic start --v2 myApp tabs

$ ionic info

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.2.0
Xcode version: Not installed

Replace home.html with

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="wrapper">
    <ion-slides #mySlider (ionSlideDidChange)="SlideChanged()">
      <ion-slide  *ngFor="let s of Slides ;  let ii=index" class="AMSImage">
        
          <img id="AMSImage" src={{s.PIC}}> 

      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

home.ts now looks like after some trimming…I kept just the image alone in ion-slide no slide titles or other divs…

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Slides } from 'ionic-angular'; // 20160807
import { ViewChild } from '@angular/core'; // 20160807

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }

  @ViewChild('mySlider') slider: Slides;
  ngAfterViewInit() {
    console.log("Slider------------>>Input Props Set");
    this.slider.autoHeight = true;
  }
  Slides: any = [
    { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 01.png" }
    , { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 02.png" }
    , { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 03.png" }
    , { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 04.png" }
  ];

  SlideChanged() {
  }
}

still no resizing. Sometimes on launch only the top 20% of the 1st image is painted, until I swipe.

Let me know what I missed. Are you testing with tabs template?
Thanks
Here is what I see on ionic serve -w chrome or from vscode, and I expect the image to be shrunk height-wise to fit.

Don’t blow a gasket, & don’t get too far off track there. Drop your code, meaning just copy and paste. You asked a question on slides. I’ve been trying to help. If you need help upgrading, read the many topics that will tell you exactly what to do.

Ionic’s quite nice. It only takes a little code to do all you need to do. And upgrading this way will show you all the structural changes. Want to diff 2, 3, 4 or more changelogs? Go for it. It doesn’t give the same as you following the architecture changes, yourself. And there are a TON of changes. …you’d notice them all if you follow the steps listed above. Good luck.

I have shared with you working code, something you can actually copy/paste and test on your side .
I can’t say the same about post 16 and I tried to follow it the best of my abilities, there isn’t much to it.

You have asked to create a new app 2.0.0 instead of upgrading RC6 to 2.0.0, I did.
I only edited home.ts and home.html to match your post 16 Dynamic slide height

However, It’s not working, is that hard to believe?
I have been at this since June 2016, gaskets are cheap I am afraid the cam is going to fly off :slight_smile:

I have also found some CSS to auto-resize the image in the available container, however it seems, in my case, to work only for width resizing not for height. Also, unlike on a simple image, the resizing behavior is somehow altered by ionic2/Slider.js, here it is if can help someone you can tweak it to work as expected.


  <div id="wrapper" >
    <ion-slides #Slides>
      <ion-slide *ngFor="let s of SlidesData ">


            <img id="AMSImage" src={{s.PIC}}  style='height: 100%; width: 100%; object-fit: contain'>


      </ion-slide>
    </ion-slides>
  </div>

found here http://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container

add

.slide-zoom {
height: 100%;
}

that’s not necessary. try cleaning your css code. and if that’s not responsible for the issue, give it more test cases.

i just hide all inactive slides, like this:

.swiper-slide:not(.swiper-slide-active) > div {
    display:none;
}

it solves problem with empty spaces

6 Likes

Hello,

Its not working with latest update ionic (Ionic 3.3.0 or newer)

1 Like

this work for me but when i add element depend id the user select yes option from radio button , new text input appear so, the this text input don’t appear,
should i do a function that do autoheight = true and call it on every change made on radio buttons because i have alot, but it’s not practise, you have any solution

This solution works like a charm. Setting slides.height = true doesn’t work for me.

1 Like

PERFECT. Nice, lightweight solution. Rare in these crazy times. Thank you.

I have the same problem with Ionic 3.8.0