CODEWITHSUNDEEP
cssangulartypescriptsassionic3
BinaryTox1n
BinaryTox1n

Reputation: 3556

Ion-slide style width is set automatically

I recently updated my Ionic 2 project to Ionic 3, and the changes to ion-slides have broken my app.

Specific widths are being set in the style tags on the slides when the app loads, and it's breaking my styles.

This is what I have in my HTML:

<ion-slides pager>
  <ion-slide *ngFor="let image of offer.Gallery">
    <img [src]="image.Url"/>
  </ion-slide>
</ion-slides>

And this is how it renders:

<ion-slides pager="" class="slides slides-md slides-43" ng-reflect-pager="">
    <div class="swiper-container swiper-container-horizontal"><div class="swiper-wrapper">
        <ion-slide class="swiper-slide swiper-slide-active" style="width: 171px;">
            <div class="slide-zoom">
                <img src="IMG">
            </div>
        </ion-slide>
    </div>
    ... Pagination ...
</ion-slides>

You'll notice that somehow the ion-slide tag has a style="width: 171px;" set on it. What is causing this and is there a way to turn it off?

Upvotes: 6

Views: 13347

Answers (4)

Crag
Crag

Reputation: 1841

The slidesPerView option defaults to 1; to show more slides at a time, increase this in your slider options.

HTML:

<ion-slides pager [options]="slideOpts">...

typescript:

slideOpts:any = {slidesPerView: 7}

Upvotes: 0

pivalig
pivalig

Reputation: 29

Try this:

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

Upvotes: 2

Rebar
Rebar

Reputation: 1115

you can address the ion tags directly in Ionic 3!

A more dynamic solution would be using unset value for it.

Just try to write in your yourpage.scss:

ion-slide { 
width: unset !important;
}

and it should remove it!

Upvotes: 11

Sampath
Sampath

Reputation: 65920

If it is not the width you need then just change it as shown below.

Note: There are No Saas variables for this

your-page.scss

  .md,
  .ios,
  .wp {
      .swiper-slide .swiper-slide-active{
         width: 100px;//your width here
     }
   }

Note: If above was not working then you must use width: 100px !important;. No other option where I can think of.

Upvotes: 4

Related Questions