Ionic 4 ion-slide width is wrong

Ionic Framework
1

Hi!

I don’t know if this is a bug or I’m doing something wrong, but the size of the slide on a 360px screen sets to more then 2000 px. What could be the problem?

The content is not even this long if it’s in one row. In case of short slide content, the slide is shorter then the screen. It won’t set to full width, eventhough it’s only supposed to show one at a time.

Thank you!

(this is full new, empty project)

Ionic:

ionic (Ionic CLI) : 4.2.1
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/build-angular : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/angular-toolkit : 1.0.0

Cordova:

cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)
Cordova Platforms : not available
Cordova Plugins : not available

System:

NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10

home.page.html:

<ion-slides pager="false" [options]="sliderOptions">

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-1.png" alt=""/>
      </div>
      <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-2.png" alt=""/>
      </div>
      <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-3.png" alt=""/>
      </div>
     <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

  <ion-slide>
    <div class="slide-content">
      <div class="image-wrap">
        <img src="assets/slide-4.png" alt=""/>
      </div>
      <h1>...</h1>
      <div class="text">
        <p>....</p>
        <p>....</p>
        <p>...</p>
      </div>
    </div>
  </ion-slide>

</ion-slides>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button color="light">
    <ion-icon name="arrow-round-forward"></ion-icon>
  </ion-fab-button>
</ion-fab>

home.page.scss:

ion-slides {
	height: 100% !important;
	background: var(--ion-color-primary);
	color: #fff;

	ion-slide { 
		align-items: start;
		text-align: center;

		.slide-content {
			padding: 30px 10%;

			.image-wrap {
				width: 80%;
				margin: 0 auto;

				img {
					width: 100%;
				}
			}

			.text p {
				margin-top: 0;
				margin-bottom: 10px;
			}
		}
	}
}

ion-fab-button {
	--box-shadow: 0 0 0 transparent;

	ion-icon {
		color: var(--ion-color-primary);
	}
}
2

ion-slide >:first-child {
width: 100%;
}

3 Likes
3

I’m using Ionic 5, and a PortalOutlet inside which I’m instantiating a Component which uses ion-slides & ion-slide. I’m experiencing the same problem, except my slides are being set to over 15000px! (I am on a ultra-wide monitor, wondering if their is a correlation).

Anyway, I wound up adding:

ion-slide {
  width: 100% !important;
}

.swiper-wrapper {
  width: min-content !important;
}

to my css for the component. But it would appear that their is some corner case bug here…