Ionic 4 ion-slide width is wrong

@frontend-raiden wrote:

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? 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);
	}
}

Posts: 1

Participants: 1

Read full topic